Accessible icons and SVGs

Icons can be meaningful or decorative. Meaningful icons need an accessible name. Decorative icons should be hidden from assistive technologies so they do not add noise.

Generated CSS content can be especially unpredictable. Different browser and screen reader combinations may expose generated text differently, so it is useful to test the patterns you use.

Meaningful inline SVG icons

These examples use the same SVG search icon. The first two give the icon an accessible name. The last one does not.

Accessible: inline SVG with <title> and aria-labelledby.

Accessible: inline SVG with role="img" and aria-label.

Not accessible: meaningful SVG with no accessible name.

Decorative inline SVG icons

If the visible text already explains the control or content, the icon is usually decorative. In that case, hide the SVG from screen readers.

Accessible: button has text, and the decorative SVG has aria-hidden="true".

Not ideal: the decorative icon has its own name, so some users may hear extra information.

CSS generated icons

These icons are created with the CSS content property. Screen reader support for generated content has changed over time and can vary by browser.

Profile status

Accessible: the generated circle is decorative, and the visible text provides the name.

Accessible name added with ARIA: the visual arrow has no text, so the element needs a name.

Not accessible: the arrow is visual only and the element has no accessible name.

Continue

CSS generated alt text: the pseudo-element uses content: "→" / "" so the arrow can be treated as decorative where supported.