1.4.10 Reflow [AA]

Level AA

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels.
    Except for parts of the content which require two-dimensional layout for usage or meaning.>

Explanation

It must be possible to view content at 400% zoom without having to scroll in two different directions. This means that people who use high zoom or magnification levels can read content comfortably.

Responsibilities

  • Content
  • Design
  • Development
  • QA

Requirements

  • Pages with vertically scrolling content are responsive, and content reflows into a single column with no horizontal scrolling at a breakpoint of 320 CSS pixels wide (the equivalent of 1280 CSS pixels at 400% zoom);
  • Pages with horizontal scrolling are responsive, and reflow with no vertical scrolling at a break point of 256 CSS pixels high (the equivalent of 1024 CSS pixels at 400% zoom).

Common mistakes

  • Content does not reflow to a single column with no horizontal scrolling when zoomed up to 400%;
  • It is necessary to zoom both horizontally and vertically to read content at 400% zoom;
  • The size of containers or the position of content is fixed in the CSS.

Official resources

Other resources