Disabilities Affected: Mobility, Visual
Success Criterion: 2.4.11
When a user interface component receives keyboard focus, the component must not be entirely hidden due to author-created content (like sticky headers/footers or non-modal dialogs).
Why It Matters
Keyboard users need to see which element currently has focus. If a sticky header, footer, cookie banner, or other persistent element covers the focused element, the user loses their place on the page and cannot effectively interact with the focused control.
Fixing the Issue
Ensure that elements receiving keyboard focus remain at least partially visible. Test keyboard navigation thoroughly, paying close attention to elements near the top or bottom of the viewport that might be obscured by sticky headers or footers. Adjust the layout, z-index, or scrolling behavior (e.g., using scroll-padding-top or JavaScript scroll adjustments) to ensure focused elements are not completely hidden. Be mindful of non-modal dialogs or banners that might appear and cover focused elements.
Good Code Example
Using scroll-padding-top to account for a sticky header:
-
:root {
/* Define header height as a variable */
--header-height: 60px;
}
header.sticky {
position: sticky;
top: 0;
height: var(--header-height);
background-color: #f0f0f0;
z-index: 100;
}
html {
/* Add padding to the top of the scroll container (html or body) */
/* equal to the header height. When an element receives focus */
/* and the browser scrolls it into view, this padding ensures */
/* it appears below the sticky header. */
scroll-padding-top: var(--header-height);
}
Bad Code Example
Sticky footer obscuring focused links at the bottom:
-
footer.sticky {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: white;
z-index: 100; /* High z-index */
}
/* If there are focusable elements (links, buttons) positioned */
/* near the bottom of the main content area, this sticky footer */
/* might completely cover them when they receive focus, especially */
/* if the browser tries to scroll them to the bottom edge of the viewport. */
/* Need scroll-padding-bottom or JS solution. */
