What this means
Text and controls should remain usable when the screen is narrow or the page is enlarged. Content must not overlap, get cut off, or disappear. Most page content should fit without needing to scroll both sideways and down.
Passing examples
- A long heading wraps onto several lines on a phone.
- At 200% zoom, text grows and controls remain readable and usable.
- At 400% zoom on a typical desktop display, ordinary paragraphs fit the narrow viewing area without sideways scrolling.
Failing examples
- A heading is clipped after three words on a phone.
- At 200% zoom, a picture covers important instructions.
- At high zoom, a Send button falls outside the visible area with no way to reach it.
Some content, such as a detailed data table or map, needs a wider layout. Its information must still be reachable. Shrinking all text is not a useful solution.