Chapter 41: Accessible Icon (Utility)

Core Idea

Wraps an icon with a required accessible label, making purely-visual icons meaningful to screen readers without any visible change.

Key Concepts

• Root: single part, single required prop — label* (a string). No visual difference from the wrapped icon; the label is announced, not displayed.
• Built on Visually Hidden: internally uses the Visually Hidden utility to render the label text off-screen but still in the accessibility tree.
• The core problem it solves: an icon's visual meaning (e.g. an "X" glyph) isn't inherently machine-readable — the same glyph could mean "close", "delete", or "cancel" depending on context, so a label must be supplied explicitly.

Code Examples

<AccessibleIcon.Root label="Close">
  <Cross1Icon />
</AccessibleIcon.Root>

• What it demonstrates: giving an otherwise-ambiguous icon glyph an explicit accessible meaning.

Key Takeaways

1. Wrap every icon-only interactive element (icon-only buttons, icon-only links) with this instead of leaving it unlabeled or relying on a title attribute alone.
2. The label should describe the icon's function in context ("Close", "Delete comment"), not a literal description of the glyph ("X shape").
3. If the icon sits inside an element that already has its own accessible name (e.g. a button with visible text plus a decorative icon), you generally don't need this — reserve it for icon-only controls.

Connects To

• Visually Hidden: the lower-level utility this component is built on.