35 lines
1.5 KiB
Markdown
35 lines
1.5 KiB
Markdown
[Back to 2 Operable index](index.html)
|
|
|
|
# 2.4.12 Focus Not Obscured (Enhanced)
|
|
|
|
- Level: AAA
|
|
- Guideline: 2.4 Navigable
|
|
- Principle: 2 Operable
|
|
|
|
## What it is
|
|
|
|
When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.
|
|
|
|
## How to test
|
|
|
|
- Check: When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.
|
|
- Use the sufficient techniques below as acceptable methods when applicable.
|
|
- Confirm none of the common failures apply.
|
|
|
|
## Sufficient techniques (W3C)
|
|
|
|
- C43: Using CSS scroll-padding to un-obscure content
|
|
|
|
## Common failures (W3C)
|
|
|
|
- An interaction that causes content to appear over the component with keyboard focus, visually covering part of the focus indicator. This behavior might be encountered with advertising or promotional material meant to provide more information about a product as the user navigates through a catalogue.
|
|
- A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page, a focused item is partially obscured by the footer because content in the viewport scrolls without sufficient scroll padding.
|
|
|
|
## Resources
|
|
|
|
- WCAG 2.2 SC: https://www.w3.org/TR/WCAG22/#focus-not-obscured-enhanced
|
|
- Understanding: https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-enhanced.html
|
|
- Quick reference: https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2#focus-not-obscured-enhanced
|
|
|
|
[Back to 2 Operable index](index.html)
|