Design Principle
Icon-only buttons and statuses need accessible names, while decorative icons should be hidden from assistive technology.
Principle
Icon-only buttons and statuses need accessible names, while decorative icons should be hidden from assistive technology.
Design action
Icon buttons provide aria-label or visible text; decorative icons are aria-hidden, and status icons pair with text.
Examples
Positive example: Toolbar icons, status icons, card actions, and navigation icons rely on SVG or lucide. Counterexample: A delete button is announced only as trash.
Apply when
Toolbar icons, status icons, card actions, and navigation icons rely on SVG or lucide. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems. WCAG 2.2: https://www.w3.org/TR/WCAG22/ WCAG Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html WCAG Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html Apple HIG Accessibility: https://developer.apple.com/design/human-interface-guidelines/accessibility Carbon Accessibility Overview: https://carbondesignsystem.com/guidelines/accessibility/overview/
Agent Directive
Icon buttons provide aria-label or visible text; decorative icons are aria-hidden, and status icons pair with text.