If the image is an inline SVG does it have an aria-labelledby attribute associated with the title element?

Goal

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 id attribute.

How to implement

If a <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

1. Right-click the SVG to inspect the code and check to see if it has an aria-labelledby attribute in the <svg> element, and that it has a value.
2. In that same inspector panel, ensure that the <title> element has an id attribute that has the same value as #1.