Reflow - Success Criterion 1.4.10 (Level AA)

Question

When content in your site or application is zoomed up to 400%, does text wrap into one column so scrolling is not required in more than one direction?

Why is this important?

When sites or applications are not responsive, users must scroll back and forth to reveal lines of text and at times text may be hidden off screen.

A responsive site or application helps all people using various devices and especially supports those with low vision that require enlarged text. When browser zoom is used to enlarge content up to 400%, the content should wrap or reflow to one column, so users do not have to scroll in more than one direction. This makes it easier to read content and track lines of text.

Whom does it benefit?

Example 1

As a person with low vision who sets my browser zoom to 400%,
I want to have the content readjust to fit the screen
so that I can interact with everything on the page.

Example 2

As a person who reads textbooks on my phone,
I want to view content without scrolling back and forth
so that I can complete my assignments when commuting to school.

What should you do?

Ensure content on your site or application is designed to:

• Be responsive
  
• Zoom to 400% without requiring the user to scroll horizontally or vertically
  
• Not lose information or functionality.

Note: This success criterion does not apply to content that requires a two-dimensional layout (e.g. maps, diagrams, data tables).

How do you do it?

• Set vertical scrolling content at a width equivalent to 320 CSS pixels.
  
• Set horizontal scrolling content at a height equivalent to 256 CSS pixels.
  

Need technical guidance?

Technical guidance is available for implementing this Success Criterion at the Understanding Success Criterion 1.4.10: Reflow page.

Additional resources to help you

• Exploring WCAG 2.1: 1.4.10 Reflow - Knowbility