For users who rely on keyboard navigation, this can make it nearly impossible to get where they want to go.
Focus Not Obscured (Minimum) makes sure that at least part of focused elements are always in view, so users can see what they’re interacting with. However, there are no rules for how much of the focused element can be hidden. We recommend you consider WCAG 2.4.12 Focus Not Obscured (Enhanced) as the best practice instead.
Who this impacts
- Keyboard-only users: Users who navigate by tabbing through elements need to see what’s focused without it being blocked by other on-page elements.
- People with low vision: Those using screen magnifiers or zoom settings benefit from a clear, unobstructed view of each focused element.
- All users: Everyone benefits from consistent and visible focus indicators, especially those who might be temporarily unable to use a mouse.
How to meet Focus Not Obscured (Minimum)
- Ensure focus visibility: Keep focused elements visible, avoiding overlap or obstruction by other components like sticky headers or pop-ups.
- Check with high zoom levels: Test your site with zoomed-in views to confirm that focused elements remain visible, even at high magnifications.
- Verify with assistive tools: Use keyboard navigation to ensure that focused items are easily seen and accessible.
Practical example
Top tips
- Account for sticky elements: Make sure sticky headers, footers, or pop-ups don’t completely cover up focused elements as users navigate the page.
- Test with zoom: Ensure that focused elements stay visible across different screen magnifications and assistive technology setups.
- Use consistent focus indicators: Ensure that the focus indicator is clear and prominent, making it easy for users to track focus on the page.