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.
Agent Directive
Icon buttons provide aria-label or visible text; decorative icons are aria-hidden, and status icons pair with text.