CodeParkUsers with low vision often zoom the page to 200% or 400%. The layout must keep working.
The WCAG rules (all level AA):
- 1.4.4 Resize Text: text can grow to 200% without content being cut off or lost.
- 1.4.10 Reflow: content works at a width of 320 CSS pixels without scrolling sideways. That equals a 1280px-wide window zoomed to 400%. Things that need two directions, like maps and big data tables, are excused.
- 1.4.12 Text Spacing: nothing breaks when users increase line height, letter spacing, word spacing and paragraph spacing.
CSS habits that break it:
- Fixed heights on boxes with text, such as
height: 40px. The text overflows or gets cut off when it grows. Usemin-heightor padding. overflow: hiddenon text containers, which hides the overflow.- Fixed-width layouts like
width: 1200px, instead of flexible widths and media queries. - Font sizes in
pxonly. They ignore the user's browser font-size setting. Userem. maximum-scale=1oruser-scalable=noin the viewport meta tag. This blocks pinch zoom on mobile.- Sticky headers that fill half the screen at 400% zoom.
To test, zoom the browser to 400% and check that you can still read and use everything.
- Text must resize to 200% without loss of content.
- Content must reflow at 320 CSS pixels wide without sideways scrolling, which equals 400% zoom.
- Fixed heights and
overflow: hiddenon text cause clipping when text grows. - Use
remfor font sizes and flexible layouts instead of fixed pixel widths. - Never block pinch zoom with
user-scalable=noormaximum-scale=1.