View source for Allowing for Reflow

[[Category:Techniques]]
[[Category:Techniques In Development]]
[[Category:Techniques Needs Work]]
[[Category: WCAG 2.1]]

== Status ==

* New technique (Draft)

== Applicability ==

HTML/CSS documents

This technique relates to:

* [https://rawgit.com/w3c/wcag21/master/guidelines/index.html#reflow  Reflow]
** How to Meet 1.4.10 Reflow
** [https://rawgit.com/w3c/wcag21/text-spacing/understanding/21/reflow.html Understanding Success Criterion 1.4.10 Reflow]

== Description ==

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

== Resources ==

* [https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2018Feb/0041.html Increasing Firefox Zoom Settings] - Jim Allan

=== Related Techniques ===

* Using media queries (CSS). Ref: [https://cloudfour.com/thinks/the-ems-have-it-proportional-media-queries-ftw/ em based media queries] (Future technique)
* Using CSS grids to reflow content (CSS). Ref: [http://alistapart.com/article/fluidgrids fluid grids] (Future technique)
* Using CSS Flexbox to reflow content (CSS) (Future technique)
* [https://www.w3.org/TR/WCAG20-TECHS/SCR34 SCR34: Calculating size and position in a way that scales with text size (Scripting)]
* [https://www.w3.org/TR/WCAG20-TECHS/G206 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.