Level AAWCAG 2.2
2.4.11 Focus Not Obscured (Minimum)
When a component receives keyboard focus, it is not entirely hidden by author-created content.
Why it matters
Keyboard users
When focus is hidden under a sticky header, users lose their position entirely and can no longer operate the page.
Low vision
Under magnification the visible area is small, making a hidden focused element even harder to find.
Motor impairments
Having to return hidden elements back to the viewport is a large burden for users with limited movement.
Mobile users
On small smartphone screens, sticky banners and cookie bars easily obscure the focused element.
Live demo
Focus hidden by fixed elements
Tab Use the Tab key to move through the form and check whether lower fields disappear behind the sticky elements.
Sticky header
Sticky footer
Lower fields can be hidden behind fixed elements when focused
When fixed headers, footers, or banners hide the focused element, keyboard users can lose track of where they are. Use scroll-padding or JavaScript to keep the focused element visible in the viewport.
Understanding through personas
Kimura (33) — Cervical spinal cord injury
I operate the keyboard with a mouth stick. When I press Tab and focus slips under the sticky header, I can't tell where it is, and it can take minutes to scroll to find it again.