Ensure that assistive technology can find the text alternative for screen reader users and other scenarios.
Why this matters
Some assistive technology is not currently capable of identifying an SVG’s text alternative (the
<title> element), and some folks don’t put the text alternative in the
<title> element. The most reliable way to ensure assistive technology can find the text alternative is to use the
aria-labelledby attribute to point to the title’s
How to implement
<title> isn’t implemented, do that first. See If the icon is a foreground SVG does it have the correct title?
Because the same SVG may be used in multiple places on the page for different purposes (for example, multiple “delete” icons which each delete a different row on a table), we need to be careful not to repeat the same id attribute value in multiple places. (See Is all the HTML produced semantic and valid according to validators?)
If you can programmatically set the
id attributes for both the
<svg aria-labelledby="..."> value and the
<title id="..."> value, do that. Otherwise, set them manually.
How to test
- Right-click the SVG to inspect the code and check to see if it has an
aria-labelledbyattribute in the
<svg>element, and that it has a value.
- In that same inspector panel, ensure that the
<title>element has an
idattribute that has the same value as #1.