Understanding SC 1.4.10 Reflow
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 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, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.
People with low vision use zoom functionality more often than not to read the contents of a web site. In some cases, some users may require more than 200% or – to be more specific – up to 400% of zoom to read the content. Given this use case, there is a high chance of content being hidden to a particular side or being cut off, making it difficult to read.
This success criterion requires that the content reflows vertically or aligned to a single column without requiring the use of two dimensional scrolling. Technically speaking, the reflow must be supported up to 400% zooming on a desktop with 1280 PX screen which is equivalent to 320 CSS PX. This measurement comes down to a mobile device which has the minimum screen size.
How do we meet this?
Responsive Web Design (RWD) is the only answer to this critical problem. Writing the CSS media queries for different viewport widths would fix most of the issues here. In simple terms, as the user zooms up to 400% or views the content on a small mobile device, the screen realest ate shrinks. RWD, in turn, fits the content into the screen in spite of how smaller the screen is.
What is expected?
Generally, if a menu is horizontally spread over a big screen, it either shrinks to a single column menu or further wrapped in a hamburger menu at the top of the main content when the user zooms the page. Similarly, content can be wrapped within a toggle type element that can expand/collapse or show/hide them in a single column. All that matters is that the SC requires that there should be no loss of content or functionality and/or a horizontal scroll bar.
Exceptions
Videos, charts, graphs, complex tables and authoring tools that have editing toolbars and any content or user interface components that require two dimensional scrolling to understand the content need not meet the success criterion.
Raghavendra Satish Peri – Very well written. Do you have few options to share on this issue:
1. One text field having a very long email id. Is it ok to truncate that text at the end? It’s a loss of information though.
Hello Asha,
I believe in the input fields when there is a long string of text the text will truncate. We need to manage to show the information using the CSS, one of the solutions I see is to show the text when the input receives tab or mouse focus… this needs bit of thinking. I am blind but when I was working on this article my sight assist told me that placeholder text is not completely visible in one of the examples.
Check this article
https://www.digitala11y.com/anatomy-of-accessible-forms-placeholder-is-a-mirage/
Thanks for bringing a new perspective here. I will get back when I find a solution.