Summary:
Content can be presented without loss of information or function, and without requiring scrolling in two directions.
Details:
People with low vision often need to enlarge text in order to easily read content. Enlargement enables perception of characters and the reflow of content enables tracking. Tracking is following along lines of text, including getting from the end of one line to the beginning of the next line.
Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling significantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.
The value of 320 CSS pixels was chosen as a reasonable minimum viewport width that content authors can achieve. This value lines up with the reported viewport width of small displays of many common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%.
Exceptions:
Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, and is therefore out of scope of this guideline. Some examples:
- Graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable so this is an exception in many cases.
- Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. Therefore this guideline does not apply to data tables.
- Interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g., horizontally in a vertically scrolling page). Therefore this guideline does not apply to interfaces which provide toolbars.
