This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.
Using CSS Flexbox for Reflow
From WCAG WG
Contents
Status
- New technique (Draft)
Applicability
HTML/CSS documents
This technique relates to:
- Reflow
- How to Meet 1.4.10 Reflow
- Understanding Success Criterion 1.4.10 Reflow
Description
The objective of this technique is to show how to test for reflow.
Resources
- Increasing Firefox Zoom Settings - Jim Allan
Related Techniques
- Using media queries (CSS). Ref: em based media queries (Future technique)
- Using CSS grids to reflow content (CSS). Ref: fluid grids (Future technique)
- Using CSS Flexbox to reflow content (CSS) (Future technique)
- SCR34: Calculating size and position in a way that scales with text size (Scripting)
- G206: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text
- Using PDF/UA when creating PDFs (Future technique)
Test
- Set zoom level to 400%.
- Set window size to 1280 pixels wide.
- Visit the page to be tested.
- In another window or screen, display the same page in a window also 1280 pixels wide, but with no zoom or character sizing.
- Compare the two displays to check that either no information or functionality shown in the un-zoomed display is missing from the zoomed display, OR where content is missing it can be revealed either in drop-down or popup form by operating a button, or by following a link, or by another similarly simple action.
- Check, in the zoomed display, that no content is cropped, or expands out of its container, or is overwritten by other content, or ends up over a poorly contrasting background.
Expected Results
- Without requiring scrolling in two dimensions, no loss of information or functionality occurs, except for parts of the content which require two-dimensional layout for usage or meaning.
