Icon
What component has
Roles and attributes
The following list describes roles and attributes that component already has.
Attribute | Usage |
---|---|
aria-hidden="true" | Only for non-interactive icons. Hides the icon from the assistive technology. |
role="button" | Only for interactive icons. Identifies the element as a button. |
Considerations for developers
Setting the interactive
property provides basic accessibility for an icon used as a button or a link. But for best current and future support across different technologies, we recommend using components that provide native a
and button
HTML elements:
- Tertiary Button or ButtonLink for icon buttons
- Link for icon links
Using these components with an icon addon and without the text will provide the same visual UI as an interactive icon.
Roles and attributes
The following list 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.
Attribute | Usage |
---|---|
aria-hidden="false" | Makes the non-interactive icon accessible for the assistive technology. Add this attribute to non-interactive icons if they convey meaningful information, such as status, category and so on, that isn't represented by text. |
aria-label or aria-labelledby | Defines an accessible name for the icon. This attribute is required for elements that don't have any text content and aren't hidden from the assistive technology. For best accessibility, add a visible Hint, which will automatically provide an aria-label for its trigger, as demonstrated in the example. |
Considerations for designers
- If an icon has a function in the interface and doesn't have any accompanying text, the function should be conveyed to users with a visible
Hint
and anaria-label
. Use the Hint component, which will automatically add anaria-label
with the same content to the icon. For example, if aTrash
icon removes a table row in the interface, add aHint
with the"Remove row"
text. - Check icon contrast against background. The contrast ratio should be at least 3:1.
Other recommendations
For more accessibility recommendations, refer to the common Accessibility guide.