Icon
On this page
Labelling icons
If an icon is interactive or otherwise not merely decorative, it will need to be labeled using the accessible-label property, which will apply aria-label and role="img" automatically.
However, when an icon is accompanied by text, the icon does not need to use accessible-label.
Hiding icons
An <rh-icon> is hidden from assistive technology by default. If an
icon is presentational, there’s no need to change the markup to hide the
icon.
Icons will be hidden from assistive technology by default
There is no need to add the additional aria-hidden="true"
ARIA Authoring Practices Guide (APG)
Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences.
Web Content Accessibility Guidelines
Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.
- SC 1.1.1 Non-text content (Level A)
- SC 1.4.1 Use of color (Level A)
- SC 2.5.8 Target size (Minimum) (Level AA)
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
