Reflow (1.4.10 – Level AA)

For ‘Reflow’, you must ensure all content retains meaning and function without scrolling in two dimensions. 

Introduction

Some users with visual impairments need to resize text to read it comfortably. 

When users enlarge content up to 400% of the default size, they should not have to scroll in their browser in more than one direction – horizontally and vertically.

How to Pass ‘Reflow’

• Ensure vertical content doesn’t require a horizontal scroll at a width of 320 CSS pixels
  
• ensure horizontal content doesn’t require a vertical scroll at a height of 256 CSS pixels

Exceptions

• Where multi-directional scrolling is essential for meaning or function (for example images, maps, diagrams, games and components that require toolbars remain in view)
  
• Complex data tables

‘Reflow’ Tips

Responsive web design, where content reflows to fit the user’s viewport, may already mean your website complies with this guideline.

It’s best not to use horizontal scrolling when writing in most languages, as we are accustomed to reading columns of text vertically. Reflow your content into a single vertical column when enlarged.

320 CSS pixels is the same as a default viewport of 1280 pixels enlarged 400%.

256 CSS pixels is the same is a default viewport of 1024 pixels enlarged 400%.

See Also

• 1.4.4 – Resize Text
• Understanding Success Criterion 1.4.10 (W3C)