Design Principle
Focus state is part of the interaction path, not a browser default flaw.
Principle Focus state is part of the interaction path, not a browser default flaw.
Design action Design high-contrast focus-visible states for all interactive elements; focus rings should not be clipped and keyboard order should follow visual order.
Examples Positive example: Buttons, links, inputs, tabs, menus, and card entries. Counterexample: outline: none has no replacement.
Apply when Buttons, links, inputs, tabs, menus, and card entries. Pages include complex navigation or admin operations.
Source notes Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems.
Agent Directive
Design high-contrast focus-visible states for all interactive elements; focus rings should not be clipped and keyboard order should follow visual order.