WCAG SC 2.4.11 ensures that when a user interface component receives keyboard focus, it is not fully hidden or, partially visible once focused by author-created content. This criterion is crucial for maintaining accessibility, especially in dynamic web environments where pop-ups, sticky headers, and other UI elements can obscure focused components.
To ensure that any element receiving keyboard focus remains at least partially visible to the user, even when dynamic content or author-created elements are present.
Ensure visibility of focused elements: Ensure all elements are visible when they receive keyboard focus.
Avoid obscuring focused content: Avoid placing sticky headers, footers, or other elements in a way that can obscure focused content.
Use scroll-padding with sticky elements: When placing sticky headers or footers, use CSS properties like scroll-padding to maintain the visibility of focused elements. This will ensure that when the focus arrives at the 'obscured element,' there will be an offset to create visual space between the element and the sticky block.
Provide partial focus indicators if necessary: Provide partial focus indicators if full visibility is not feasible.
Use focus trapping for persistent content: Use the ‘Focus trapping’ methodology to trap navigation in persistent content, such as pop-ups, dialogs, and advertisement banners. This ensures that even if the pop-up obscures other elements on the website, the focus will not reach them for keyboard users until they exit the pop-up. Be sure to include an escape mechanism within the trapped pop-up.
Ensure non-persistent content disappears: For non-persistent content, ensure that obscuring blocks disappear once keyboard interaction with them is complete. If they do not, make sure to include this mechanism.
Avoid obscuring focusable elements with draggable elements: For draggable elements or objects, ensure that the elements do not obscure any focusable elements in their initial positions provided by the author. Once the user moves the objects, it is no longer the author's responsibility.
Example: Focus Management with Sticky Footer
A page has a sticky footer at the bottom of the viewport. When tabbing through the page, the focused item arrives at the interactive element, however, it is obscured by the sticky footer, making it invisible to the user.
Explanation:If an interactive element receiving focus is hidden by the sticky footer, users will not be able to see or interact with it, causing confusion and accessibility issues.
A page has a sticky footer at the bottom of the viewport. When tabbing through the page, the content scrolls up to ensure that the focused item is always visible. By using the scroll-padding property in CSS, the page can be designed to automatically adjust the scroll position to keep the focused element visible. This ensures that users can see which element is focused and interact with it accordingly.
Explanation:In this correct implementation, the focus is not obscured because the content scrolls up to display the item with keyboard focus. The use of CSS scroll-padding ensures that the focused element remains visible, enhancing accessibility for all users.