Responsive Layout, Zoom, and Text Spacing
Support orientation changes, 200 percent text resize, 320 CSS pixel reflow, and user-defined text spacing without clipping or lost content
Accessible responsive design lets people magnify and restyle content without losing information or controls. Test orientation (1.3.4), text resized to 200% (1.4.4), reflow at the equivalent of 320 CSS pixels wide (1.4.10), and the text-spacing overrides in 1.4.12 as distinct requirements.
Two-dimensional scrolling is allowed when it is essential to meaning or use, such as a large data table, map, or diagram. Orientation can be locked only when a particular orientation is essential. Browser zoom is not a substitute for resilient author CSS.
Fixed Layout vs. Resilient Reflow
View inaccessible code
.form { width: 620px; height: 120px; overflow: hidden; }
input, button { width: 300px; height: 32px; white-space: nowrap; }View accessible code
.form { max-width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
input { box-sizing: border-box; width: 100%; }
button { min-height: 2.75rem; white-space: normal; }Required test settings
Test both portrait and landscape. Resize text to 200% without relying only on full-page zoom. At a 1280 CSS-pixel viewport, zoom to 400% to approximate a 320 CSS-pixel viewport. Apply line height 1.5, paragraph spacing 2em, letter spacing 0.12em, and word spacing 0.16em. Verify that content, focus indicators, labels, error text, and controls do not clip or overlap.