# Understanding Resize Text

## In brief

Goal
  Text can be enlarged.
What to do
  Ensure text can be doubled in size.
Why it's important
  Some people can only read text when it is bigger.

## Intent of Resize Text

The intent of this Success Criterion is to ensure that visually rendered text, including controls and labels using text, can be made larger so that it can be read more easily by people with milder visual impairments, without requiring the use of assistive technology (such as a screen magnifier). Users may benefit from scaling all content on the Web page, but text is most critical.

The scaling of content is primarily a user agent responsibility. User agents that satisfy UAAG 1.0 Checkpoint 4.1 allow users to configure text scale through a number of mechanisms - including zoom (of the entire page's content), magnification, text-only resizing, and allowing the user to configure a size for rendered text. The author's responsibility is to create Web content that does not prevent the user agent from scaling the content effectively. Authors may satisfy this Success Criterion by verifying that content does not interfere with user agent support for resizing text, including text-based controls, or by providing direct support for resizing text or changing the layout. An example of direct support might be via server-side script that can be used to assign different style sheets.

Content satisfies the Success Criterion if it can be scaled up to 200% using at least one text scaling mechanism supported by user agents.

If the author is using a technology whose user agents do not provide support for specific text scaling mechanisms, the author is responsible for providing this type of functionality directly, or providing content that works with the type of functionality provided by the user agent. For instance, if the user agent doesn't provide full-page zoom functionality, but does let the the user change the text size, the author is responsible for ensuring that the content remains usable when the text is resized.

Some user interface components that function as a label and require activation by the user to access content are not wide enough to accommodate the label's content. For example, in Web mail applications the subject column may not be wide enough to accommodate every possible subject header, but activating the subject header takes the user to the full message with the full subject header. In Web-based spreadsheets, cell content that is too long to be displayed in a column can be truncated, and the full content of the cell is available to the user when the cell receives focus. The content of a user interface component may also become too wide in user interfaces where the user can resize the column width. In this type of user interface component, line wrapping is not required; truncation is acceptable if the component's full content is available on focus or after user activation and an indication that this information can be accessed, is provided to the user in some way besides the fact that it is truncated.

Content satisfies the Success Criterion if it can be scaled up to 200% - that is, up to twice the width and height. Authors may support scaling beyond that limit, however, as scaling becomes more extreme, adaptive layouts may introduce usability problems. For example, words may be too wide to fit into the horizontal space available to them, causing them to be truncated; layout constraints may cause text to overlap with other content when it is scaled larger; or only one word of a sentence may fit on each line, causing the sentence to be displayed as a vertical column of text that is difficult to read.

The working group feels that 200% is a reasonable accommodation that can support a wide range of designs and layouts, and complements older screen magnifiers that provide a minimum magnification of 200%. Above 200%, zoom (which resizes text, images, and layout regions and creates a larger canvas that may require both horizontal and vertical scrolling) may be more effective than text resizing. Assistive technology dedicated to zoom support would usually be used in such a situation, and may provide better accessibility than attempts by the author to support the user directly.

Images of text do not scale as well as text because they tend to pixelate, and therefore we suggest using text wherever possible. It is also harder to change foreground and background contrast and color combinations for images of text, which are necessary for some users.

As with most other Success Criteria, this criterion applies to each variation of the page that is automatically presented for various screen sizes (e.g. media query variations in a responsive site). In an implementation where text does not consistently increase its size as people zoom in (such as when it is transformed based on a media query to adapt to small-screen usage), it must still be possible to get to 200% enlargement in order to satisfy the criterion.

For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280 CSS pixels wide, at 200% zoom it will visually appear at twice the size. After zooming by 400% the page reflows to fit within the 320 CSS pixel viewport, the author may decide to set the page's text size to 10px. The text is now half the original size in CSS pixels, but as it has been enlarged to 400%, it is still displayed at twice the size compared to the default browser setting at 100% zoom. It is not required to achieve 200% text enlargement while remaining inside a specific breakpoint (as zooming may result in the variation for a new breakpoint becoming active), but it should still be possible to get 200% text enlargement in some way compared to the default 100% zoom.

See also 1.4.3: Visual Presentation.

## Benefits of Resize Text

- This Success Criterion helps people with low vision by letting them increase text size in content so that they can read it.

## Examples of Resize Text

- A user with vision impairments increases the text size on a Web page in a browser from 1 em to 1.2 ems. While the user could not read the text at the smaller size, they can read the larger text. All the information on the page is still displayed when the larger font is used for the text.
- A Web page contains a control for changing the scale of the page. Selecting different settings changes the layout of the page to use the best design for that scale.
- A user changes the scale of the content with the browser's full-page zoom function. All the content scales uniformly, and the browser provides scroll bars, if necessary.

## Resources for Resize Text

- CSS 2 Box Model
- CSS 2 Visual formatting Model
- CSS 2 Visual formatting Model Details
- About fluid and fixed width layouts
- Accessible CSS

## Techniques for Resize Text

### Sufficient Techniques for Resize text

1. Using a technology that has commonly-available user agents that support zoom

2. Ensuring that text containers resize when the text resizes AND using measurements that are relative to other measurements in the content by using one or more of the following techniques:

   - Specifying the size of text containers using em units

   - Techniques for relative measurements

     - Using percent for font sizes
     - Using named font sizes
     - Using em units for font sizes

   - Techniques for text container resizing

     - Calculating size and position in a way that scales with text size (Scripting)
     - Using liquid layout
3. Providing controls on the Web page that incrementally change the size of the text
4. Ensuring that there is no loss of content or functionality when the text resizes and text containers do not resize

### Additional Techniques (Advisory) for Resize Text

- Scaling form elements which contain text
- C20: Using ems to set column width so that lines can average 80 characters or less
- Using CSS to control visual presentation of text

### Failures for Resize Text

- Failure of 1.4.3 and 1.4.6 when resizing visually rendered text up to 200 per cent causes the text to be clipped, truncated or obscured
- Failure of Success Criterion 1.4.4 and Success Criterion 1.4.7 when text-based form controls do not resize when visually rendered text is resized up to 200%
- F94