Understanding Success Criterion 1.4.10: Reflow

Understanding Success Criterion 1.4.10 Reflow

Ensure that there is no loss of information and function while presenting the content which enables users to avoid scrolling in two dimensions. 

Official Requirements

Success Criterion 1.4.10 Reflow (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 a two-dimensional layout for usage or meaning.

320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.

Examples of content which requires two-dimensional layout are images required for understanding (such as maps and diagrams), video, games, presentations, data tables (not individual cells), and interfaces where it is necessary to keep toolbars in view while manipulating content. It is acceptable to provide two-dimensional scrolling for such parts of the content.

Why is it required?

Users with low vision often need to enlarge text for ease of reading. Therefore, it is essential that there is no loss of information or functionality when users augment up to 400% of the original or default size.

Note: 

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

How do we fix it?

  • Ensure that horizontal scroll isn’t introduced at a width equal to 320 CSS pixels for vertical content. Similarly, a vertical scroll at a height of 256 CSS pixels for horizontal content.
  • Ensure that long URLs and strings of text support reflow

Are there any exceptions?

This success criterion has two exceptions

  • When multi-dimensional scrolling is considered essential for meaning or functionality. For example: Graphics and videos
  • Complex data tables
  • While editing content the interface needs to show both the toolbar and the content in the viewport. Therefore, a scrollbar is required when there are multiple buttons 

Mistakes to avoid

The content disappears when zoomed at 400% as the reflow is not enabled.

 For example: A global search field disappears after reflow, without an icon or menu option to reveal a search function or reach an equivalent search page.

Picture of Aditya Bikkani

Aditya Bikkani

Aditya is the COO of AELData, a growing technology company in the Digital Publishing and Education sectors. He is also an entrepreneur and founder of an accessibility tool called LERA. A W3C COGA (Cognitive and Learning Disabilities Accessibility) Community Member Aditya contributes to researching methodologies to improve web accessibility and usability for people with cognitive and learning disabilities.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on Social Media

Facebook
Twitter
LinkedIn
Email
Pinterest
Reddit
WhatsApp

Related Blogs

How Accessible Is Your Website?

Check your site’s accessibility in few seconds with our FREE accessibility checker. Ensure compliance with ADA & WCAG guidelines and improve user experience across the board.

Skip to content