a11y/reflow

Why

People who zoom to 400% on a laptop see a 320px-wide page. If they must scroll sideways for every line, reading becomes a two-axis search and they lose their place.

Fix

Build layouts that wrap: flex-wrap, grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)), max-width instead of width, overflow-wrap: anywhere for long words and URLs. Data tables, maps, diagrams and code may scroll inside their own container (fe-a11y-tables). Test at 320px width or 400% zoom.

Examples

/* bad */
.cards { display: grid; grid-template-columns: repeat(3, 300px); }
/* good */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }

Sources

• WCAG 2.2, Understanding SC 1.4.10 Reflow
• WCAG 2.2 Technique C32, using media queries and grid CSS to reflow columns

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/reflow