The inline SVG file format is one of the best methods we have for displaying complex information, because it can be manipulated with CSS and Javascript to be accurate, animated, and impactful.
As with all complexity, that can come with a price for accessibility and usability.
General recommendations
- Read An Accessibility-First Approach to Chart Visual Design for a case study regarding building accessible charts.
- Read Image alt text and SVG titles for guidance on how to describe an inline SVG in its alt text.
- Read Providing a location for a long description for alternatives to the
<desc>element for the long description. - If you’re planning to treat the SVG like an image, remove text from the SVG or keep it to a minimum.
- An SVG with the role of “img” should have an
aria-labelledbyattribute that lists the IDs of all of the text elements in the SVG. They will then be read to the user as one long string of text. - An SVG with the role of “group” can have its text elements navigated separately, but work will need to be done to ensure that not every element in the
<svg>is read aloud. See Accessible SVGs on CSS Tricks for a bar chart example.
- An SVG with the role of “img” should have an
SVGs as interactive elements
- If you’re planning to treat the SVG like a group of objects containing anchor tags or other controls (yes, you can put an
<a>in an<svg>, Javascript can make things clickable, etc.) you are also responsible for ensuring everything about the SVG is also accessible. Interactive SVG objects must:- Be fully keyboard accessible.
- Be fully touchscreen accessible.
- Communicate the name, role, and value of semantic elements, controls, and events within the
<svg>. - Note that this is not the easy path, not everything is supported by all assistive technology, and you may be better off using HTML to build what you’re building.
- Deque recommends interactive SVGs over the use of the
<canvas>element because the<canvas>element has even worse accessibility.
High Contrast Mode recommendations
- Ensure that SVGs have background-color set behind anything important in the image. If your user has Windows High Contrast Mode turned on, the background color of the page that your image is on may change — and you want to make sure that the background color on your image stays legible.
- Note that Windows High Contrast Mode overrides CSS, so an SVG styled with CSS may have its colors overridden and become unusable.
- A media query exists to detect High Contrast Mode in Internet Explorer and Edge, but not other browsers. MDN’s -ms-high-contrast page explains more — including the fact that it won’t work for all your users.
- Deque recommends a script for changing styling when high contrast mode is detected accompanied by a description of how the script works.