• 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

get in touch

Know where you stand. Know what to work on next.

Tell us what you’re working on and where you need support. Our accessibility specialists can help with audits, remediation, VPAT/ACR, accessible development, and ongoing compliance.

Free 30-minute consultation (opens in new tab)

Free 30-minute call: talk through where you stand, scope a project or get a quote.

Need technical answers now? Book the $100 one-hour consultation to walk through an audit, talk with a developer or review your site live.

Let’s find the barriers before your users do

Indicates a required field.


Your information is kept private and never shared with third parties.

Scenarios in this lesson