Disabilities Affected: Cognitive, Mobility, Visual
Success Criterion: 2.4.12
When a user interface component receives keyboard focus, no part of the component should be hidden due to author-created content.
Why It Matters
This AAA criterion is stricter than the AA version (2.4.11). While the AA level allows partial obscuring, AAA requires the entire focused component to be visible. This provides the best experience for users who need to see the full context and boundaries of the element they are interacting with, especially users with low vision who might be using magnification.
Fixing the Issue
Apply the same techniques as for 2.4.11 (sticky headers/footers, non-modal dialogs), but be even more rigorous. Ensure that no part of the focused element is covered. This might require more generous scroll-padding, more careful management of z-index, or ensuring non-modal dialogs are positioned so they never overlap potentially focusable elements below them. Thorough testing with keyboard navigation, especially near potentially obscuring elements, is critical.
Good Code Example
Using sufficient scroll-padding-top for full visibility:
-
:root {
/* Ensure variable accounts for full header height + some buffer */
--header-clearance: 80px; /* Example: 60px header + 20px buffer */
}
header.sticky {
position: sticky;
top: 0;
height: 60px; /* Actual header height */
background-color: #f0f0f0;
z-index: 100;
}
html {
/* Set scroll-padding to ensure full clearance */
scroll-padding-top: var(--header-clearance);
}
/* Ensure focus styles don't get clipped */
*:focus-visible {
outline-offset: 2px; /* Ensure offset outline is also considered */
}
Bad Code Example
Sticky header allows partial obscuring of focused element:
-
header.sticky {
position: sticky;
top: 0;
height: 60px;
background-color: #f0f0f0;
z-index: 100;
}
html {
/* Padding might be just enough for AA (1px visible) but not AAA (full visibility) */
/* Especially if the focused element itself has height */
scroll-padding-top: 61px;
}
/* If a button just below the header receives focus, the top part of */
/* the button (and potentially its focus indicator) might still be */
/* slightly clipped by the 60px header, failing the AAA requirement. */
