2.4.11: Focus Not Obscured (Minimum)

What it means

When a component receives keyboard focus, it must not be entirely hidden by author-created content — sticky headers, footers, or overlays. At least part of the focused element stays visible.

Sticky nav bars often cover focused fields on small screens.

How to fix it

• Offset scroll-into-view so focused items sit below fixed headers.
• Limit sticky panel height or hide non-essential sticky bars on focus.
• Test keyboard navigation on mobile with a persistent bottom toolbar.
• Use scroll-padding-top CSS to account for fixed headers.

Quick examples

• Good: Focusing a form field scrolls it fully above the sticky site header.
• Bad: Half the focused submit button sits hidden under a fixed footer bar.
• Good: scroll-padding-top matches the header height on all breakpoints.
• Bad: A cookie banner covers the focused link with no way to scroll it clear.