focus
GUIDELINES 1.4.13, 2.4.3, 2.4.7, 3.2.1
Overview
Focus discusses creating clear indicators for keyboard users. It is a control that would receive input from the keyboard or clipboard, to indicate where the user is on the page. This guideline goes over how to create a page with this in mind.
Who is impacted
How to test
Resources
Focus Indicators
A focus indicator is a visible outline or highlight that shows which interactive element currently has keyboard focus. Without clear focus indicators, keyboard users cannot tell where they are on the page. Browsers provide default focus styles, but they are often subtle and may not meet accessibility requirements.
Custom focus styles should be highly visible with sufficient contrast against the background. A common approach is to use a solid outline with a minimum 2px width in a contrasting color. Never remove focus outlines (outline: none) without providing an equally visible alternative.
Focus Order
The focus order should follow the logical reading order of the page, typically left to right and top to bottom for left-to-right languages. Use proper HTML structure and avoid manipulating tab order with positive tabindex values. Interactive elements should receive focus in a predictable sequence that matches the visual layout.