The entire focused item is fully visible on the screen
When a user interface component receives keyboard focus, it must be completely visible without any part of it being obscured by other content or off-screen. This allows users who rely on keyboard navigation to see the entirety of the focused element and interact with it effectively.
Acceptance Criteria
• No part of the component that receives keyboard focus should be covered by other content or be out of view.
• Ensure that the component is fully visible within the viewport, without requiring the user to scroll or adjust the view to see it.
Examples
• A button that receives focus must be entirely visible on the screen, with no part of it hidden behind other elements or off the edge of the viewport.
• When focusing on a form field, the entire field should be visible, with no obscuring elements or scrolling required to view it.
Exceptions
• Regularly test focus visibility across different screen sizes and devices to ensure that focused elements are always fully visible.
• Use responsive design principles to ensure that focused elements adapt to varying viewport sizes.
Tips
• Navigate through interactive elements using only the keyboard and verify that each focused element is entirely visible without obstruction.
• Check for visibility across different devices and screen resolutions to ensure consistent focus visibility.