Icon

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Labelling icons
  2. Hiding icons
  3. ARIA Authoring Practices Guide (APG)
  4. Web Content Accessibility Guidelines
  1. Labelling icons
  2. Hiding icons
  3. ARIA Authoring Practices Guide (APG)
  4. Web Content Accessibility Guidelines

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.

Image of a download icon, an arrow pointing down with an underline beneath it

However, when an icon is accompanied by text, the icon does not need to use accessible-label.

Image of a download icon with text, an arrow pointing down with an underline beneath it with accompanying download text

Learn more about using icons in interactive elements

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.

View APG resources

Web Content Accessibility Guidelines

Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.

Edit this page on GitHub