Is all of an informational inline SVG’s text in its label?

Goal

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.

Some elements of an SVG, including text values, can be manipulated by Javascript, so the values may not be known when the SVG is created.

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

Manual testing

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.