Skip to content

Icon

What component has

Roles and attributes

The following list describes roles and attributes that component already has.

AttributeUsage
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:

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.

AttributeUsage
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-labelledbyDefines 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 an aria-label. Use the Hint component, which will automatically add an aria-label with the same content to the icon. For example, if a Trash icon removes a table row in the interface, add a Hint 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.

Released under the MIT License.

Released under the MIT License.