Unstick sticky headers when space runs out
A sticky header that takes 64 pixels of a full screen takes most of the screen once somebody zooms in. C34 uses media queries to release it, so it scrolls away like ordinary content when the space is not there. W3C lists it as advisory for 1.4.10 Reflow, which means it helps rather than satisfying the rule, and the genuinely sufficient reflow techniques alongside it are the flexbox, grid, URL-breaking and form-layout ones. W3C names three media features to work with, min-height, max-height and min-width, and it names the two situations where the problem bites. A phone held in landscape, and a desktop zoomed in. Both leave a viewport that is short rather than narrow, which is why a height query does the work a width query cannot.
How we find it in an audit
We zoom to 400 percent and count what is left. A header, a cookie bar and a chat launcher can between them leave a strip of content a few lines tall. Then we turn a phone sideways and look again, because landscape is the case a desktop test never reproduces.
How affected users experience it
Readers with low vision work at high zoom, so a fixed header that ate 20 percent of a full screen can eat most of a zoomed one. What is left is a letterbox, and reading a paragraph through it means scrolling a line at a time with the header sitting on top of whatever they are trying to read.
Passes vs. fails
Passes
@media (min-height: 30em) {
header { position: sticky; top: 0; }
}
/* in short viewports the header scrolls away */Fails
header { position: sticky; top: 0; }
/* sticky at every viewport size */How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Meta viewport allows for zoomA tool can check this
The other techniques filed under this rule
11 guides on this site are filed under 1.4.10 Reflow. W3C lists this one as advisory for that rule rather than sufficient, which means it helps real readers without being accepted as evidence you conformed.
- C31sufficientReflow content with flexbox at narrow widths
- C32sufficientStack columns with grid and media queries
- C33sufficientBreak long URLs so nothing scrolls sideways
- C38sufficientLet labels and inputs wrap on narrow screens
- G206sufficientOffer a layout without horizontal scrolling
- G224sufficientPreserve meaningful indentation when text reflows
This guide is our interpretation of W3C technique C34: Using media queries to un-fixing sticky headers / footers. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.