Ensure that people using assistive technology have access to all of the content in an SVG.
Why this matters
Everyone should have access to the information an SVG is being used to convey.
Whenever possible use the power of the technology to provide all of your users with an equal amount of information.
How to implement
Accessible SVGs by Heather Migliorisi on CSS Tricks provides demonstrations on how to create a bar chart or interactive infographic out of an SVG and make it accessible.
In both cases one of the key steps is using the aria-labelledby attribute to build the string of content you want read to the user. Using the
aria-labelledby attribute and a string of space-delimited
id values can provide the user access to the information in the SVG.
How to test
Right-click and inspect the
<svg> to confirm it has an
aria-labelledby attribute with one or more
id values listed to create its alt text.
Screen reader testing
Use a screen reader to listen to the page and confirm that the information presented in the SVG is relevant, accurate, and meaningful.