Focused element is completely covered by other content

Rule

When a user interface component receives keyboard focus, the component MUST NOT be entirely hidden due to author-created content.

Background

When a visible indication of which element has keyboard focus is missing because the element is hidden by other content, sighted keyboard users will have no idea which link or control has focus. Sometimes content (such as sticky footers, sticky headers, or other popups or overlays) can overlap elements as a user tabs forward or backward or interacts with a page. Ensuring that content doesn’t overlap elements with focus makes it much easier to track focus as a keyboard user navigates through the page.

How to Fix

Fix this issue by using an applicable technique below:

For content such as sticky headers, sticky footers, cookie consent banners, etc:

1. Use a technique such as CSS scroll-padding to ensure sticky headers or sticky footers do not obscure the focused item when tabbing forward or backward through the page.

For overlays such as non-modal dialogs, tooltips, submenus, chat widgets, message panels, etc. that are opened and closed BY THE USER (e.g. by using the Spacebar or Enter key or when tabbed to):

1. Position the popup so it does not cover other focusable content OR
2. Make the content modal and move focus to it and trap focus in it OR
3. Close the content when focus leaves it OR
4. Provide a way for the user to close the overlay content (e.g. the ESC key) while focus is on an item behind the overlay.

For overlays such as non-modal dialogs, popups, submenus, chat widgets, message panels, etc. that open AUTOMATICALLY:

1. Position the popup so it does not cover other focusable content OR
2. Make the content modal and move focus to it and trap focus in it OR
3. Don’t open the content automatically. Allow the user to open and close it and follow the recommendations for user-controlled content above.

For content such as modal dialogs that don’t automatically get and trap focus when opened:

1. Move focus to the modal dialog and trap focus inside it.