Perceivable · 1.4 Distinguishable

Reflow WCAG 1.4.10 · Level AA

Content must be usable without scrolling in two directions, and without losing information or function, at a width of 320 CSS pixels, or a height of 256 CSS pixels for horizontally scrolling content. Parts needing a two-dimensional layout, such as maps, data tables and diagrams, are exempt.

Level
AA
Since
WCAG 2.1
Principle
Perceivable
Guideline
1.4 Distinguishable
Try the live demo All criteria Checklist

Live demo

Narrow the page to 320 pixels

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Drag the width from 1280 down to 320 pixels. Check whether you can read the product details and reach Add to cart without scrolling sideways.

Live example

Passes

Canvas day backpack

$64.00

A 20-liter backpack in waxed cotton, with a padded laptop sleeve and two front pockets.

What happened

    Why it passes

    The layout is flexible. At 320 pixels the photo moves above the details, and everything fits in one column that you scroll down.

    Why it fails

    The layout is fixed at 900 pixels. At 320 pixels you have to scroll sideways to read each line and to find the Add to cart button.

    Examples

    Code that fails, and the fix

    Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 2 lines

    Fails

    Fixed-width page wrapper

    Live preview

    CSS
    .page {  width: 960px;  margin: 0 auto;}

    At 320 CSS pixels wide, which is a 1280px window zoomed to 400%, a 960px page needs sideways scrolling to read every line.

    Passes

    Wrapper that shrinks with the window

    Live preview

    CSS
    .page {  max-width: 60rem;  margin: 0 auto;  padding: 0 1rem;}

    max-width limits the width on large screens, but the page can shrink to 320 pixels, so text wraps inside the window.

    Fails

    Long tracking URL in the text

    Live preview

    HTML
    <p class="tracking">Track your parcel at  <a href="https://parcels.example.com/track?ref=AB1234567890US4471200938KXQ7720341&amp;zip=10001">https://parcels.example.com/track?ref=AB1234567890US4471200938KXQ7720341&amp;zip=10001</a></p>

    A long URL has few places where the browser may break it, so it can push the page wider than 320 pixels and cause sideways scrolling.

    Passes

    Let long strings wrap

    Live preview

    CSS
    .tracking a {  overflow-wrap: anywhere;}

    overflow-wrap: anywhere lets the browser break the URL at any character when it would not otherwise fit, so it stays inside 320 pixels (technique C33).

    Passes

    Data table scrolls inside its own box

    Live preview

    HTML
    <div role="region" aria-labelledby="fares-caption" tabindex="0" style="overflow-x: auto">  <table>    <caption id="fares-caption">Train fares by time of day</caption>    <tr><th scope="col">Route</th><th scope="col">Peak</th><th scope="col">Off-peak</th></tr>    <tr><th scope="row">Boston to Providence</th><td>$18.40</td><td>$12.10</td></tr>  </table></div>

    Data tables need two dimensions, so they are exempt. Scrolling the table inside a labelled, focusable region keeps the rest of the page in one column.

    Why it matters

    Who it helps

    People with low vision who zoom to 400 percent can read by scrolling in one direction, instead of panning back and forth along every line.

    W3C: Understanding 1.4.10

    • Level AA

      Level AA is the level most laws and policies require.

    • In WCAG versions

      Added in WCAG 2.1 in June 2018, and kept in 2.2.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      Required where the law names WCAG 2.1 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Australia and New Zealand.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Set a desktop browser window to 1280 CSS pixels wide and zoom to 400 percent, or set the viewport to 320 CSS pixels wide.
    2. Confirm text reflows into one column, nothing is cut off or overlapping, and all features still work.
    3. Confirm horizontal scrolling appears only for content that genuinely needs two dimensions, such as data tables or maps.

    Common failures

    Where it breaks

    • A fixed-width layout or a long unbroken string, such as a URL, forces horizontal scrolling at 320 CSS pixels.
    • Navigation links or controls are hidden at narrow widths with no menu button or other way to reach them.
    • Text in a fixed-size container is cut off or overlaps other content at 400 percent zoom.

    On the Accessibility Checklist

    Related