Operable / 2.4 Navigable
2.4.7Focus Visible
Level AAEnsure the keyboard focus indicator is visible so users can see which element currently has focus; do not remove the focus ring. It only needs to be visible in at least one mode of operation, not necessarily in every mode.
Specification updated
- Enhancement#5067(opens in a new tab)2.4.7: Note that focus indicators are subject to 1.4.11
Note
A detailed commentary for this success criterion is not yet available. In the meantime, this page lists related patterns, techniques, and links to the normative sources.
Related Techniques
Specific implementation techniques for meeting this success criterion. This site doesn't include the full text, so follow the links to the original W3C documents.
Sufficient Techniques(7)
- C15: Using CSS to change the presentation of a user interface component when it receives focus(opens in a new tab)waic.jp(opens in a new tab)
- C40: Creating a two-color focus indicator to ensure sufficient contrast with all components(opens in a new tab)waic.jp(opens in a new tab)
- C45: Using CSS :focus-visible to provide keyboard focus indication(opens in a new tab)waic.jp(opens in a new tab)
- G149: Using user interface components that are highlighted by the user agent when they receive focus(opens in a new tab)waic.jp(opens in a new tab)
- G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over(opens in a new tab)waic.jp(opens in a new tab)
- G195: Using an author-supplied, visible focus indicator(opens in a new tab)waic.jp(opens in a new tab)
- SCR31: Using script to change the background color or border of the element with focus(opens in a new tab)waic.jp(opens in a new tab)
Failures(2)
- F55: Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received(opens in a new tab)waic.jp(opens in a new tab)
- F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator(opens in a new tab)waic.jp(opens in a new tab)
Normative References
- Success Criterion 2.4.7 Focus Visible — WCAG 2.2(opens in a new tab)The normative requirement text.
- Understanding Focus Visible — W3C(opens in a new tab)Official guidance on intent, examples, and techniques.