For users who rely on keyboard navigation, this can make it nearly impossible to get where they want to go.
Focus Not Obscured (Enhanced) ensures that focused elements are always fully visible, so users can see exactly what they’re interacting with—no partial obstructions allowed. This is the way.
Who this impacts
- Keyboard users: Users who navigate by tabbing need every focused element to be fully visible, avoiding any overlap from other page elements.
- People with low vision: Those using screen magnifiers benefit when all focused elements are completely in view, without portions obscured.
- All users: Complete visibility for focused elements improves usability for everyone, making navigation smoother and more predictable.
How to meet Focus Not Obscured (Enhanced)
- Ensure full visibility for focused elements: Avoid any overlap or obstruction from other components, like pop-ups, sticky headers, or footers.
- Test at various zoom levels: Confirm that focused elements stay fully visible even with screen magnifiers or high zoom settings.
- Verify with assistive tools: Use keyboard navigation to ensure that focused items are entirely visible and accessible.
Practical example
The banner pushes all the content down instead of sitting on top of it, ensuring that focus will not be obscured by the banner.
Top tips
- Prioritize complete visibility: Make sure no part of a focused element is covered by sticky elements or pop-ups.
- Test with zoom and assistive technology: Verify that focus visibility remains clear, even at high magnifications.
- Aim for consistency: Use a clear focus indicator and maintain full visibility across the site for a seamless experience.