Your sticky header is failing WCAG 2.2
Focus Not Obscured is the most commonly failed new criterion in 2.2, and almost every corporate site with a sticky header fails it.
Nguyen Hoang Anh
Principal Engineer
· 5 min read
WCAG 2.2 added Success Criterion 2.4.11, Focus Not Obscured. It says that when an element receives keyboard focus, it must not be entirely hidden by other content.
Sticky headers hide focused elements constantly. Tab to a link, the browser scrolls it into view, and the header covers it.
The fix is two lines
Set scroll-padding-top on the root element to the height of your sticky chrome plus a little breathing room, and scroll-margin-top on anchor targets. That is genuinely most of it.
The part people miss is that the value has to track the header height, including when the header compresses on scroll. Drive both from the same custom property.
“Drive the sticky height and the scroll padding from the same custom property, or they drift apart within a month.”
Then test it with the keyboard
Unplug the mouse and tab through the page. Every place the focus ring disappears is a defect, and an automated tool will not find a single one of them.
Nguyen Hoang Anh
Principal Engineer
Writes about the work as it actually goes, including the parts that reflect badly on us.
