• Success Criterion 1.4.10
  • Conformance level AA

Desktop Breakpoint That Never Switches to Mobile Layout

1.4.10 — Reflow

Scenario

Setting

A government tax-filing portal

What’s wrong

Media queries stopping at 768px so mobile breakpoint never engages under desktop zoom.

Example 

window.addEventListener('load', function () {
  if (window.innerWidth > 768) {
    document.body.classList.add('desktop-layout');
  }
});
/* .desktop-layout has a fixed 960px column that never re-checks on zoom or resize */

Why it matters

A filer who zooms to 400% after the page loads is still stuck in the fixed 960px desktop layout, since the check only ran once at load time.

How to test

Zoom a 1280px-wide desktop browser to 400%: if the mobile-style single-column layout never engages because breakpoints stop at 768px, it fails.

How to fix

Use CSS media queries instead of a one-time JavaScript width check; queries re-evaluate automatically on zoom and resize.

@media (max-width: 480px) {
  .content-column { width: 100%; max-width: 100%; }
}

Outcome

A filer zooms in mid-form and the layout switches to a single column right away instead of staying locked to desktop.

Who is affected

Low-vision filers who zoom in after the page has loaded never get the mobile layout meant to serve them.

Learn more

Related scenarios