54 lines
2.7 KiB
Markdown
54 lines
2.7 KiB
Markdown
[Back to 2 Operable index](index.html)
|
|
|
|
# 2.4.13 Focus Appearance
|
|
|
|
- Level: AAA
|
|
- Guideline: 2.4 Navigable
|
|
- Principle: 2 Operable
|
|
|
|
## What it is
|
|
|
|
When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:
|
|
|
|
- is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
|
|
- has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
|
|
|
|
Exceptions:
|
|
|
|
- The focus indicator is determined by the user agent and cannot be adjusted by the author, or
|
|
- The focus indicator and the indicator's background color are not modified by the author.
|
|
|
|
## How to test
|
|
|
|
- Check: is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
|
|
- Check: has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
|
|
- Check: The focus indicator is determined by the user agent and cannot be adjusted by the author, or
|
|
- Check: The focus indicator and the indicator's background color are not modified by the author.
|
|
- Use the sufficient techniques below as acceptable methods when applicable.
|
|
- Confirm none of the common failures apply.
|
|
|
|
## Sufficient techniques (W3C)
|
|
|
|
- G195: Using an author-supplied, visible focus indicator
|
|
- C40: Creating a two-color focus indicator to ensure sufficient contrast with all components
|
|
- C41: Creating a strong focus indicator within the component
|
|
|
|
## Common failures (W3C)
|
|
|
|
- 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
|
|
- 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
|
|
|
|
## Notes
|
|
|
|
- Note 1: What is perceived as the user interface component or sub-component (to determine the perimeter) depends on its visual presentation. The visual presentation includes the component's visible content, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.
|
|
- Note 2: Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.
|
|
- Note 3: Contrast calculations can be based on colors defined within the technology (such as HTML, CSS, and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.
|
|
|
|
## Resources
|
|
|
|
- WCAG 2.2 SC: https://www.w3.org/TR/WCAG22/#focus-appearance
|
|
- Understanding: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
|
|
- Quick reference: https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2#focus-appearance
|
|
|
|
[Back to 2 Operable index](index.html)
|