Icon Accessibility
Best Practices
Most icons are presentational (decorative). They accompany text or exist within interactive elements that already have accessible names. These must use aria-hidden="true" to hide them from assistive technology.
Standalone informative icons are rare. When an icon conveys meaning without accompanying text, it must use role="img" and aria-label to provide an accessible name.
Interaction Design
This section provides detailed instructions for how different input types should navigate and operate the pattern.
Keyboard
If an icon is placed within an interactive element (such as a button), the interactive element must be keyboard accessible via TAB key. Refer to the Icon Button pattern for more information on interactive icons.
Screen Reader
Presentational icons must be skipped by screen readers.
Standalone informative icons must announce the aria-label value and image role.
Pointer
Icons are not clickable by default. If placed within an interactive element, clicking the icon will perform the desired action.
ARIA Reference
| Attribute | Description |
|---|---|
| aria-hidden="true" | Applied to presentational icons to hide them from assistive technologies. |
| role="img" | Applied to standalone informative icons to identify them as images to assistive technologies. |
| aria-label | Applied to standalone informative icons with role="img" to provide an accessible name. |