Skip to content

Accessibility

An icon is presentational by default — it carries no text and has no interaction pattern of its own, so accessibility hinges on a single decision: is this icon decorative or informative? A decorative icon repeats meaning that adjacent text already conveys and must be hidden from assistive technology; an informative icon is the only carrier of its meaning and must be given an accessible name. Get that one call right and the icon meets WCAG 2.1 AA.

For designers

Section titled “For designers”
  • An icon that carries meaning must stand out from its background — its glyph and its background must meet non-text contrast. Because an icon has no text, this is Non-text Contrast, not the text-contrast criterion. Source: WCAG 1.4.11 Non-text Contrast.
  • Never rely on an icon’s colour alone to carry meaning — an icon that signals a state (error, success, warning) must be distinguishable by its shape, not just its hue. Source: WCAG 1.4.1 Use of Color.
  • Pair a meaning-bearing icon with a visible text label wherever the layout allows; a lone glyph is ambiguous to many users, and the text also gives the icon its accessible name for free.
  • Use semantic colour tokens (e.g. foreground/neutral/default) rather than fixed values, so the icon adapts correctly across themes and surfaces.

For developers

Section titled “For developers”

Decide whether the icon is decorative or informative, then wire it accordingly. A decorative icon is hidden from the accessibility tree; an informative icon is given an accessible name and must not be hidden. The per-element wiring for each case is in the Labelling elements section below.

Labelling elements

Section titled “Labelling elements”

Give the icon the role, name, and state assistive technology needs — driven entirely by whether it is decorative or informative.

Decorative icon

Purely visual, or duplicating meaning that adjacent text already conveys. Take it out of the accessibility tree with aria-hidden="true" and give it no accessible name, so screen readers skip it: <i class="tng-icon icon-car" aria-hidden="true"></i>. An icon nested inside a labelled control (e.g. a button that already has aria-label) is decorative in this sense — hide the glyph and let the control carry the name.

Informative icon

The sole carrier of its meaning, so it must not be hidden. Give it an accessible name — either role="img" plus aria-label on the icon itself (<i class="tng-icon icon-download" role="img" aria-label="Download"></i>), or an adjacent visible text label that names it. When an icon conveys meaning, never leave it as an unnamed, aria-hidden glyph.

Source: WCAG 4.1.2 Name, Role, Value.