• Success Criterion 2.4.7
  • Conformance level AA

2.4.7 · Focus Visible

Lesson overview · Focus Visible

In plain language

Keyboard focus must always be visible.

Who it affects

Sighted keyboard users and low-vision users who must see where focus is.

How to check

Tab through every page: at every stop you must clearly see which element is focused. Worked example — A video-conferencing app's meeting controls: compare a control's:hover CSS styling to its:focus styling in DevTools: if hover has a visible effect but:focus doesn't, keyboard users get nothing.

Common misconception

A subtle color change on focus (like a slightly darker button) often passes a casual glance but fails in practice, because it's too faint to notice, especially for low-vision users. Real example: on a video streaming service's show detail page, as soon as an element receives keyboard focus, a script throws focus away (blur) — keyboard users can never actually reach or use it.

Learn more

Scenarios in this lesson