Where content is zoomed there should be no loss of information or functionality. In particular on smaller devices or resolutions of 320px (vertically) or 256px (horizontally) there should be no scrolling in two directions when resized.
Why is this a problem?
- People who are sight impaired often use screen magnification to resize page content and this can cause info to get lost.
- Scrolling can often be difficult for some disabled users, more so when horizontally or both horizontally and vertically at the same time.
- Some languages scroll vertically like Chinese, Japanese, Mongolian or Korean.
Accessibility Requirements for 1.4.10 Reflow (AA)
- Make sure your pages are responsive and the content will ‘reflow’ to a single column gracefully.
- A simple browser based test is to try a width of 1280px at 400% zoom. You can zoom in on a Mac in Chrome by pressing CMD and + key (until you see the resolution hit 400%).
- For web content which is designed to scroll horizontally with vertical text, set viewport height of 1024px and then the 400% zoom.
Common mistakes for 1.4.10 Reflow (AA)
- Content does not reflow to a single column when zoomed.
- Horizontal scrolling appears in both directions at some low resolutions when content is zoomed.
- Using fixed sized containers and fixed position content (CSS)
- Use of <code><pre> formatted content (such as code) can cause horizontal scrolling. Using the CSS declarations such as word-wrap: break-word; on <code><pre> in small viewports will help to avoid horizontal scrolling at all.
Techniques for 1.4.10 Reflow (AA)
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the “Other Techniques” section.
Common Failure for 1.4.10 Reflow (AA)
The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.
- F102: Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed
FAQS about Reflow
Examples of content which require two-dimensional layout
Images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.
Who are Benefited?
Users with low vision who need to make the content larger benefit when the layout adjusts. Research shows that horizontal scrolling significantly reduces reading comprehension. It is easier for for people who enlarge text to read word-wrapped text line by line rather than scrolling back and forth across long lines of text. People with mobility issues may have difficulty scrolling in more than one direction. Everyone benefits when all content is easily viewed on a mobile device.
Reflow CSS pixel usage?
320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which are designed to scroll horizontally (e.g. with vertical text), the 256 CSS pixels is equivalent to a starting viewport height of 1024px at 400% zoom.