Using CSS Flexbox for Reflow

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

1. Set zoom level to 400%.
2. Set window size to 1280 pixels wide.
3. Visit the page to be tested.
4. In another window or screen, display the same page in a window also 1280 pixels wide, but with no zoom or character sizing.
5. 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.
6. 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.