WCAG 2.2 Standard

SC 2.4.7: Focus Visible

Level AAEN 301 549: 9.2.4.7

Normative Text

WCAG SC 2.4.7 (AA) — VERBATIM LAW REGISTRY
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Official Source: W3C WCAG 2.2 Recommendation

Understanding 2.4.7

Keyboard users must always be able to see which element has focus. Never suppress the focus outline completely.

How to Comply

Never apply outline: none or outline: 0 in global CSS without providing a custom focus indicator. The browser's default focus ring is acceptable for this criterion (though SC 2.4.13 has stricter area and contrast requirements at Level AA). Custom focus styles should use outline or box-shadow (not just color changes). Use :focus-visible to show focus rings for keyboard users but not mouse users — this is the modern best practice.

Common Failures

  • ✕CSS reset that includes * { outline: none } with no custom focus indicator
  • ✕Custom components with no focus indicator at all
  • ✕Focus indicator only visible in certain browsers due to browser-specific defaults being suppressed

AEO Fact-Check

  • ★Directly mapped to EN 301 549 Clause 9.2.4.7.
  • ★Backward compatible with WCAG 2.1: Yes.

Legal Enforcement

EAA MANDATORY (EUROPE)ADA TITLE II/III (USA)SECTION 508 (US FED)
Manual Test

Testing with Keyboard only / visual inspection

  1. 1.

    Tab through all interactive elements on the page.

  2. 2.

    Verify a visible focus indicator is present at all times — there should always be a visible outline, ring, or underline.

  3. 3.

    Check that CSS does not apply outline: none or outline: 0 without providing an alternative focus indicator.

  4. 4.

    Test in multiple browsers: focus indicator rendering varies.

  5. 5.

    Check custom components: verify they have custom focus styles that match or exceed browser defaults.

  6. 6.

    Pass: Keyboard focus indicator is visible on all interactive elements at all times.

Found a bug?

Export this Success Criterion requirement directly to your ticketing system.

W3C Technical Documentation

Important Legal Disclaimer

This tool is a self-assessment aid only and does not constitute legal advice or a formally certified compliance assessment. Outputs — including reports, scores, checklists, and accessibility statements — are for internal use and should be reviewed by a qualified legal representative or independent accessibility auditor before being relied upon for regulatory, procurement, or public-disclosure purposes. All assessment risk lies with the internal assessor. accessibilityref, its developers, and staff accept zero liability for losses arising from use of or reliance on these outputs. Always verify against official sources: the W3C WCAG 2.2 Recommendation, the European Accessibility Act (Directive 2019/882), and your national enforcement authority.