- Success Criterion 1.4.4
- Conformance level AA
Sticky Header That Grows Large Enough to Cover Content
1.4.4 — Resize Text
Scenario
Setting
An online clothing store's product listing page
What’s wrong
Sticky headers growing to cover content at 200%.
Example
During an audit of an online clothing store's product listing page: sticky headers growing to cover content at 200%.
Why it matters
Low-vision people who enlarge text instead of using a screen reader. On an online clothing store's product listing page, that means they can't perceive the control's boundary or state.
How to test
Set zoom to 200% and scroll: if a sticky header grows and covers page content it didn't cover before, it fails.
How to fix
At 200% text size/zoom, all content and controls must remain visible, readable, and usable — nothing clipped, overlapped, or lost.
Outcome
With the fix in place on an online clothing store's product listing page, they tell the information apart without relying on color.
Who is affected
Low-vision people who enlarge text instead of using a screen reader.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Text and Controls That Get Cut Off at 200% Zoom
- Form Fields That Don’t Grow When Text Is Enlarged
- Font Size Set in Viewport Units That Ignores Browser Zoom
- Viewport Meta Tag That Disables Pinch-to-Zoom on Mobile
- Fixed-Height Containers That Clip Content at 200% Zoom
- Button or Nav Text That Overflows Its Fixed-Size Container