Ensure users can see which item currently has keyboard focus
When a user interface component receives keyboard focus, it must be at least partially visible on the screen. This ensures that users who rely on keyboard navigation can see and interact with the focused element, even if other content is on the page.
Acceptance Criteria
• Any element that receives keyboard focus must not be completely obscured by other content or off-screen.
• If content can be moved or repositioned by the user, ensure the initial position of the focusable component is not hidden.
Examples
• A text field or button that becomes focused remains visible and is not pushed completely off-screen or covered by other elements.
• In a scrolling interface, when a user navigates to a button using the keyboard, the button should be within the visible viewport or scrolled into view.
Exceptions
• If content opened by the user obscures the focused component, the focus is not considered hidden if the user can reveal the focused component without changing the keyboard focus.
Tips
• Test focus visibility by navigating through interactive elements using only the keyboard.
• Consider viewport sizes and scrolling behavior to ensure focused elements are not entirely hidden or obscured.
How to test?
• Use keyboard-only navigation to focus on various elements and verify that each focused element is visible and not hidden by other content.
• Ensure that if user interaction (like scrolling) is needed to reveal the focused element, this does not require altering the keyboard focus.