Skip to main content :::
:::

What Is a Focus Indicator? Showing Keyboard Users Where They Are

A focus indicator shows keyboard users where they are. If focus styles are removed or weak, users can get lost.

Last updated:

Key Takeaways

  • Focus indicators orient keyboard users.
  • Do not remove focus with outline: none unless you provide an accessible replacement.
  • Check visible focus and obstruction; do not treat AAA focus appearance requirements as general AA rules.

How to check

Use Tab and Shift+Tab to enter and leave components; follow the expected arrow-key pattern inside composites such as tabs and menus. Not every child item needs a separate Tab stop. Check visible focus after each move, including near sticky headers, floating messages, and scroll containers.

A clear outline around a button can be easier to identify than a subtle background-color change. Still inspect it on the actual background, in supported themes and with zoom, rather than relying on one screenshot.

How do WCAG 2.2 AA and AAA differ?

AA: 2.4.7 requires visible keyboard focus; 2.4.11 requires that author-created content not entirely hide the focused control. Keeping every part unobscured is a stronger requirement. Custom focus indicators also need assessment against adjacent colors under 1.4.11, including its native-appearance exception.

AAA: 2.4.13 adds a minimum indicator area and at least a 3:1 change between the same pixels in focused and unfocused states. Its area benchmark is a 2 CSS px thick perimeter, not a requirement to use only an outline. Exceptions include specified unmodified browser-default cases; consult the criterion.

Frequently Asked Questions

Can I remove the browser default outline?

Yes, but only if you provide an equally clear or better replacement.

Related Pages

References