Using CSS Flexbox for Reflow

From WCAG WG


Status

  • New technique (Draft)

Applicability

HTML/CSS documents

This technique relates to:

Description

The objective of this technique is to show how to test for reflow.

Resources

Related Techniques

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.