• 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 

header.sticky { position: sticky; top: 0; height: 64px; overflow: hidden; }
<!-- at 200% zoom the header text wraps to two lines and grows to 130px tall, but the fixed height clips it and it still overlaps the first product row -->

Why it matters

A shopper zoomed in for readability finds the top row of product results permanently hidden behind an oversized sticky header.

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

Switch the header to min-height so it can grow without clipping, and give the page content enough clearance beneath it.

header.sticky { position: sticky; top: 0; min-height: 64px; height: auto; }
main { margin-top: 1rem; }

Outcome

The shopper scrolls past a header that grows to fit its text without ever hiding the products below it.

Who is affected

Low-vision users, who lose access to the first several products on every listing page once the header overlaps them.

Learn more

Related scenarios