Accessible SVGs
About SVGs
- An SVG is not an image, it is a graphics-document.
- A graphics-document is a type of document in which the visual appearance or layout of content conveys meaning.
- Unlike images, SVGs can include structured child elements: link, graphics-symbol, group, img, graphics-object.
SVG Roles
- An SVG has an implicit WAI-ARIA role="graphics-document".
- In general it is best not to change the implicit role of the SVG.
- If an SVG only contains a specific type of content, such as an image, you might assign a role="img" or, in the case of an icon, role="graphics-symbol"
Hiding SVGs
- Assigning role="presentation" should be avoided, because it doesn't hide the SVG. It just cancels the native role.
- Assistive technologies will still read elements that have been given a role="presentation", they just won't give then any semantic meaning. For example, a layout table might be given a role of presentation because you don't want assistive technologies to read out row and cell information, but users can still access the content in the cells.
- In order to hide an SVG, it is best to give it an attribute of aria-hidden='"true". This functions in a similar way to display:none in CSS.
- More on the difference between role="presentation" and aria-hidden="true".
The <title> tag
- According to the SVG 2.0 specification, the <title> tag provides a short alternative description for the SVG element, in a similar way to an alt tag on an image.
- The <title> element must be the first child element within the <svg>.
- By default, the content in the <title> tag is not displayed visually.
- Browser support for the <title> tag has been increasing, and is currently at about 95%.
- To ensure that the SVG has a fully accessible label, WAI-ARIA attributes can be added.
The <desc> tag
- According to the SVG 2.0 specification, the <desc> tag provides element represents more detailed textual information for the SVG element.
- The <desc> element appears after the <title> element.
- By default, the content in the <desc> tag is not displayed visually.
- Browser support for the <desc> tag has been increasing, and is currently at about 93%.
- To ensure that the SVG has an accessible description, WAI-ARIA attributes can be added.
Example 1 - Icon + Text
role="presentation"
Bad: Here the icon is decorative because we have a text equivalent, i.e. 'Contact Stop 1'. But using role="presentation" doesn't hide the SVG from assistive technologies.
See the Pen SVG Example 1 Bad by AJN (@anormand) on CodePen.
aria-hidden="true"
Good: Here the icon is decorative because we have a text equivalent. The SVG has an implicit role="graphics-document", but is hidden from assistive technologies using aria-hidden="true".
See the Pen SVG Example 1 Good by AJN (@anormand) on CodePen.
Example 2 - Icon only
role="presentation"
Bad: Here the icon has meaning but there isn't any label.
See the Pen SVG Example 2 Bad by AJN (@anormand) on CodePen.
role="graphics-symbol"
Good: Here the icon has meaning and has been give a role="graphics-symbol", because the telephone is a symbol for getting in contact. An aria-label provides a text equivalent. Note: We could have used role="img", but graphics-symbol is more specific.
See the Pen SVG Example 2 Good by AJN (@anormand) on CodePen.
Example 3
No label on SVG
Bad: The SVG has a role="img" but doesn't have any alt text.
See the Pen SVG Example 3 Bad by AJN (@anormand) on CodePen.
aria-labelledby on SVG
Good: The SVG has an aria-labelledby attribute which references a title element. Note: the title element should be sufficient on it's own, but we added aria-labelledby to be sure.
See the Pen SVG Example 3 Good by AJN (@anormand) on CodePen.
Contact Us
For assistance or to report accessibility problems please contact:
Andrew Normand
Web Accessibility Lead
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867