Open Symbolsnpm

Accessibility

Decorative by default

Without an alt, <Icon> renders <svg aria-hidden="true">: screen readers skip it, which is right for an icon sitting next to a text label. With alt, it becomes an image:

<Icon name="wifi01" />                     // aria-hidden="true"
<Icon name="wifi01" alt="Connected" />     // role="img" aria-label="Connected"

Put the accessible name on the control, not the glyph, whenever the icon is inside a button or link — the button's own label is what assistive technology announces.

Colour and contrast

Icons paint with currentColor, so they inherit the surrounding text colour and pass the same contrast checks the text does. In Windows High Contrast / forced-colors: active the browser substitutes system colours for currentColor, so strokes stay visible without any extra CSS. Nothing in this release dims a layer to a second tone, so an icon's contrast is exactly the contrast of the colour it inherits.

Motion

See Reduced motion. The short version: the OS setting is honoured automatically, every preset has a rest state, and the library's inspector adds a Reduce motion switch that this browser remembers.

Keyboard and focus

  • The library grid is a set of buttons: Tab reaches the search box and cards, arrow keys move the selection, Escape closes the inspector.
  • On every public page, focus is drawn with a 2 px outline that does not rely on colour alone.
  • trigger="hover" and trigger="tap" listen to pointer events only (mouseenter, click) in the current adapter. For keyboard parity, drive the icon from its parent control instead: trigger="manual" plus the imperative handle's trigger() on the control's focus / keydown, or just re-run the effect from the control's state. A built-in focus/keyboard path is tracked as accessibility work in the production plan (P8).

What this site verifies

The behaviour Playwright project runs @axe-core/playwright against the library grid, the library with the inspector open (including a /?icon= deep link) and a sample of docs and content pages, failing on any serious or critical rule. A screen-reader pass is not automated and is recorded, when done, in the audit documents in the repository.