Operable / 2.4 Navigable
2.4.13Focus Appearance
Level AAANew in 2.2Make the keyboard focus indicator large enough (equivalent to at least a 2 CSS pixel border around the component) and high-contrast (at least 3:1 between the focused and unfocused states) so it is clearly visible -- a subtle color change on a thin outline is easy for low-vision users to miss. The default browser-drawn indicator is exempt if left unmodified.
New success criterion added in WCAG 2.2
This criterion was introduced in WCAG 2.2 and was not part of WCAG 2.1. Refer to the links below for detailed guidance.
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(3)
- 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)
- C41: Creating a strong focus indicator within the component(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)
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.13 Focus Appearance — WCAG 2.2(opens in a new tab)The normative requirement text.
- Understanding Focus Appearance — W3C(opens in a new tab)Official guidance on intent, examples, and techniques.