Reflow

Public Article

Article is certified Certified Article

The content of this article is certified for accuracy by the Digital Accessibility Centre.


What is Reflow?

WCAG 2.2 Success Criterion 1.4.1: Reflow

WCAG 2.2 Success Criterion 1.4.10, also known as "Reflow", is a Level AA criterion.
The intent of this Success Criterion is to support people with low vision who need to enlarge text to a point where the responsive layout should 'reflow' in to a single column. 

Generally, when the browser zoom is used to scale content to approximately 400%, it 'reflows' - i.e., it is presented in one column so that scrolling in more than one direction is not necessary. 
This is critical for people with low vision as enlargement enables perception of characters and enables tracking. 

If a 'viewport' size is set to:
- For vertical scrolling content, the width should be equivalent to 320 CSS pixels.
- For horizontal scrolling content, the height should be equivalent to 256 CSS pixels.
Content can be presented 
- without loss of information or functionality, and
- without requiring scrolling in two dimensions.
Note: Exceptions are made for parts of the content which require two-dimensional layout for usage or meaning.

The "400%" is an approximation as a viewport of 1280x1080px, zoomed to 400% will give you a viewport of 320x256px.

This criterion was introduced as part of the Web Content Accessibility Guidelines (WCAG) 2.1 update, which mainly concentrated on criteria ceated to help mobile users and those with Low Vision.


Reflow with Tables

Web-based, product property tables, with column and row headers, are best displayed with products listed horizontally and their properties vertically.

If products exceed screen width, horizontal scrolling is permissible. According to WCAG 2.2 Success Criterion 1.4.10, tables may scroll in two directions and are exempt from this criterion.

Users typically scroll to the desired product horizontally, then down through its properties.

Indicators may be needed if cell borders align with screen edges, giving the impression of the table ending.

Additional considerations include providing a descriptive table caption, addressing the top-left corner “blank” cell, and managing any extra functionality. An alternative approach is a categorised list, like this DAT Products example, which avoids two-way scrolling and can be accessible with proper markup.

Resources: (No endorsement)

 


Reflow was posted on 18/07/2024 @ 13:22