Technique G179:Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width

Applicability

All technologies that reflow text when windows are resized.

This technique relates to 1.4.4: Resize text (Sufficient).

Description

Some user agents support changing the size of text without changing other dimensions of the text container. Loss of content or functionality can occur when the text overflows the space that was allocated for it. However, the layout properties may provide a way to continue to display the content effectively. The block sizes may be defined wide enough that the text does not overflow when resized by 200%. Text may wrap when it no longer fits within the block, and the block may be tall enough that all the text continues to fit in the block. The block may provide scrollbars when the resized text no longer fits.

Examples

Example 1: A multi-column page layout

HTML and CSS are used to create a two-column layout for a page of text. Using the default value of the white-space property, normal, causes text to wrap. So as the size of the text is increased to 200%, the text reflows and the column of text grows longer. If the column is too long for the viewport, the user agent provides scrollbars so the user can scroll text into view because the author has specified the CSS rule overflow:scroll or overflow:auto.

Example 2

A newspaper layout with blocks of text in columns. The blocks have a fixed width, but no height set. When the text is resized in the browser, the text wraps and makes the blocks taller.

Tests

Procedure

  1. Increase text size to 200%.
  2. Check whether all content and functionality is available.

Expected Results

  • Check #2 is true.