DEV Community

Kai Mercer
Kai Mercer

Posted on

Check your landing page at 320px wide before you ship

#a11y #webdev #css

Most landing page checks happen on a wide desktop window and one phone. There is a cheap check in between that catches a lot: look at the page at 320 CSS pixels wide and see whether you have to scroll sideways to read it.

This is WCAG 2.2 success criterion 1.4.10 (Reflow). It says content should work without two-dimensional scrolling at a width equivalent to 320 CSS pixels. W3C notes that 320 CSS pixels is what a 1280px wide window looks like at 400% zoom, so it is also what a low-vision user on a laptop can end up with.

The check

  1. Open DevTools and set the viewport to 320px wide (or set the browser to 400% zoom on a 1280px window).
  2. Scroll the whole page from top to bottom.
  3. If you can scroll sideways, or text is cut off, something is too wide.

The spec has an exception for content that really needs two dimensions, like data tables, maps and diagrams. A hero headline, a pricing card or a footer is not one of those.

Find the element that is too wide

Paste this into the console at 320px. It lists elements whose right edge sits past the viewport:

const vw = document.documentElement.clientWidth;
[...document.querySelectorAll('body *')]
  .filter(el => el.getBoundingClientRect().right > vw + 1)
  .forEach(el => console.log(el.tagName, el.className, Math.round(el.getBoundingClientRect().right)));
Enter fullscreen mode Exit fullscreen mode

It will also list children of a horizontally scrolling box you meant to have, so read the output with that in mind.

Usual causes

  • A fixed width or min-width in pixels on a card, button row or form.
  • A long unbroken string such as an email address, URL or product code.
  • Images, video or iframes without a max width.
  • pre and code blocks. These can scroll inside their own box, which is fine, as long as the page itself does not.
  • Flex or grid children that refuse to shrink because of their content.

Small fixes 

img, video, iframe { max-width: 100%; height: auto; }

.card-text { overflow-wrap: anywhere; }

.row > * { min-width: 0; }

pre { overflow-x: auto; }
Enter fullscreen mode Exit fullscreen mode

overflow-wrap: anywhere lets an otherwise unbreakable string break at any point when there is no other break opportunity, and it also affects min-content sizing, which is why it often helps inside flex and grid layouts. Use it on text that can contain long strings, not on every element.

What to watch for

  • Fixing the overflow by hiding it (overflow-x: hidden on body) removes the scrollbar but can leave content cut off and unreachable. Fix the wide element instead.
  • Sticky headers and cookie banners can take up a big share of a short viewport at high zoom. Check that the content behind them is still reachable.
  • Re-run the check after adding new sections. Overflow tends to come back with the next card row.

It takes about two minutes and needs no tools beyond the browser.

Source: Understanding Success Criterion 1.4.10: Reflow (W3C) and overflow-wrap on MDN.

Top comments (0)