Focused element is hidden behind a sticky header
Why it matters
When a fixed header or banner covers an element as you tab to it, you cannot see what is focused.
How to fix it
Add scroll-padding-top equal to the height of the sticky element, so focused items scroll into clear view.
html { scroll-padding-top: 5rem; }Read the W3C guidance: Understanding 2.4.11 Focus Not Obscured (Minimum).
Related rules
- Click target is smaller than 24 by 24 pixels (WCAG 2.5.8)
- Click target is smaller than 44 by 44 pixels (WCAG 2.5.5)
- No visible focus indicator (WCAG 2.4.7)
- Page scrolls sideways at 320px wide (WCAG 1.4.10)
Find this on your own site. A11yMate scans every page and lists where it happens. See pricing or browse all rules.