Developer Considerations for developers
According to the ARIA in HTML document, SVG has no default corresponding role, but you can set the role this icon has in the interface (for example, button, link).
- The best way to make SVGs accessible to Assistive Technologies like screen readers and speech recognition tools is to put it directly into your HTML using the
<svg>tag. - Icon also might be interactive, just use role
buttonorlinkfor it (see the table below). Note that icon getsrole="button"automatically, if you add propinteractiveto it. - If you use icon as a clickable element, always add an appropriate
aria-label(recommend your designers to prepare it). - Avoid using
<embed>,<object>, or<img>elements as they are not as supported by browsers as inline SVG.
Find live examples in the A11y style guide.
Roles and attributes
The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in the particular cases in your interfaces.
| Role | Attribute | Element | Usage |
|---|---|---|---|
aria-hidden="true" | img, svg | Hides images from the assistive technologies, because this element is auxiliary and shouldn't be played by a screen reader. | |
aria-label | div | Defines a string value that labels an interactive element. It is a required for buttons without text content. | |
aria-labelledby | div | The aria-labelledby attribute identifies the element (or elements) that labels the element it is applied to. It is a required for buttons without text content. | |
button | div, a, svg | Icon gets role="button" automatically, if you add prop interactive to it. Identifies the element as a button. Accessible name for the button is defined by the text content of the element or by adding aria-label. | |
link | img, svg | Identifies the img/svg element as a link. |
Find live examples in the A11y style guide.
Considerations for designers
- If an icon has a function in the interface, it should be conveyed to the user through assistive technologies. In this case you should provide an appropriate
aria-labelfor it. For example, ifTrashicon removes a table row in the interface, addaria-label="Remove row". - Check icon contrast against background. The contrast ratio should be at least 3:1.
Resources
- A11y style guide gives recommendations for the accessible components.
- Accessible SVGs contains information about the accessible SVG.
- W3 link examples has detailed information about the link accessible behavior.
- Icon links and icon buttons.
- How to integrate icons in an accessible way.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.