22. Text Resize

Ensure that text size (except for captions) can be increased to at least 200% using controls in either the user agent (e.g. Web browser, PDF reader, Flash player) or the media. No content or functionality should be lost.
Note: This is primarily the responsibility of the user agent. To address this guideline, we ensure that our content either does not interfere with the user agent’s solution or provides a replacement for the user agent’s solution.

Rationale

There are many ways that users can increase the size of text on the screen. People who need high levels of magnification use dedicated screen magnification software (e.g. ZoomText, MAGic). Operating systems generally provide magnification utilities with their accessibility options. Adjusting monitor resolution can also achieve increased text sizes. And Web browsers allow this through custom style sheets.

However, many users with minor vision or reading comfort issues rely on the basic resize features built into the user agent to increase text size just a little. Some users also work with a combination of dedicated screen magnification software and browser features, to achieve an optimal text-size. As such, it is important that the media content does not disable or interfere with these features.

General Techniques

All of the Text

Be sure all of the text can be resized, including text in the navigation and on the buttons

Supporting the User Agent’s (e.g. browser, player) solution

Test the media with the resize and zoom features of supported user agents and fix any issues that are found.

Creating your own text resize feature

Creating your own text resize feature is only needed if:

• None of your supported user agents on a particular platform have resize features
• Or, if you choose not to support the resize features of your supported user agents

Special Consideration for Reading Experiences

When the primary purpose of the product is to deliver a reading experience, as is the case in an eBook reader, we recommend ensuring that text within the main reading panel reflows. Text reflow is probably of considerably less importance when there is just a bit of text on a screen with many controls. Scrolling horizontally to read one line of instructions or to reach a control is likely to be a reasonable user experience. However, when there are hours of reading and studying to be done with the main text of a product, horizontal scrolling within that main text area makes for a bad user experience.

HTML & JavaScript

Supporting Internet Explorer 6 or Earlier

If you need to support IE 6 or earlier, do not set font size using pixels. Instead use ems, exs, percentages or named sizes (e.g. small, medium).

Solving Common Problems with Browser Zoom

Usually browser zoom features will work without any adjustments; however, some minor issues may be discovered, for example:

• You may find that you need to set scrolling to auto for frames, so that scrollbars will appear when needed.
• You may also find that you need to allow windows to be resized.
• You may find that a column of text gets lost off the right side of the screen at 200% zoom, and users could miss the information entirely or may need to scroll horizontally. In this case, use float:left to position your elements and to allow the column that gets lost to move below the other content as text size increases or as the window width decreases.
• If the space between elements or the page margin increase too much as text size increases, set the size of that spacing using fixed measures, rather than using ems or percent.

If you find that elements overlap when the text is resized, the following adjustments often help:

• positioning elements using percent or ems, so their distance from other objects increases as the text-size increases
• specifying the width and/or height of boxes that hold text using percent or ems, so that the width and/or height expands as text-size increases
• setting the CSS overflow property to auto for boxes that hold text, so that text remains in the box and scroll bars appear when needed.
• using the CSS float property, to position elements on the page, so they can reflow as their size increases.

Responsive Design

On mobile browsers, there are multiple ways to magnify the text on the screen:

• Set default text size of text rendered in the browser - ensure that content and functionality is not unavailable or clipped.
• Magnify browser's viewport (typically "pinch-zoom") - if the viewport settings are defined, ensure that viewport meta tag is set to user scrollable and maximum scale is at least 2.0 or is not restricted.

Android Applications

Android system settings allow users to enlarge text and increase system level zoom. To honor the system font size settings in the application, mark the text and their associated containers to be measured in scale pixels.

When users have large fonts enabled or the labels support internationalization, their type might be larger than the space allotted for the control label. Android Developers Guide provides some design strategies for handling this situation: Devices and Displays and Supporting Multiple Screens.

iOS Applications

iOS settings allow user to set the font size and magnify the screen. Support Dynamic Type within the application. Dynamic Type will automatically adjust to letter spacing and line height for every font size, provide the ability to specify different text styles for semantically distinct blocks of text, and the text will responds appropriately to changes the user makes to text-size settings (including accessibility text sizes).

NOTE: If the application uses a custom font, the text can be scaled according to the system setting for text size programmatically. Ensure that the application responds appropriately when the user changes the setting.To learn how to use text styles and ensure that your app gets notified when the user changes the text size setting, see Text Styles in Text Programming Guide for iOS.

PDF in Acrobat

The text size in a PDF document can be increased using View > Zoom. When the document size is increased, there are often horizontal and vertical scroll bars. Acrobat has a temporary view called Reflow that shows content of the PDF in single column taking the entire width of the document pane. To turn on Reflow, go to View > Zoom > Reflow.

If the document order in Reflow is not correct, correct it in the Order pane. If an image or other content needs to be viewed in between two paragraphs in Reflow yet one entry in the Order pane covers both paragraphs, you will need to review the order in the Content pane. After making changes, also verify that the content is in the correct order in the Tags pane.

Testing HTML

Testing technique	Description
Review/Tools	The tools to use will be the resize or zoom features in your browser or media player, and any resize or zoom features built into your media. Zoom to 200%. (In Firefox, 200% is reached by pressing control + six times, if you haven’t customized your installation.)
Output	The page will be shown at 200%.
Analysis	Make sure everything is still usable.

Testing Mobile Applications

Testing technique	Description
Tools	Set the font size to largest in the device settings. On iOS8 for example, this can be found in Accessibility Settings in the Larger Text option. On Android, turn on a system-wide large font size in Settings.
Output	If the application supports text resizing (e.g. Dynamic Text on iOS, large text on Android), then the font size will increase or decrease within the application when the settings are changed.
Analysis	Change the text size in the device settings and observe if the text size is automatically adjusting. If it does not, then this is an error.

Testing PDF in Acrobat

Testing technique	Description
Tools	Use View > Zoom to change the text size. Also turn on the View > Zoom > Reflow option to check the text order.
Output	The text should flow in the correct order in reflow view.
Analysis	Make note of any text that is not displayed in the correct order.

Related Guidelines

WCAG 2.0 AA - SC 1.4.4 Resize Text

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

508 Refresh (ANPRM) - 403.3 Resizable Text

ICT shall support the ability to resize text content up to 200 percent without loss of content or functionality and without relying upon assistive technology.

Exception: Images of text, including text used for captioning, are not required to support the ability to be resized.

Advisory 403.3 Resizable Text. A best practice is to use text rather than images of text wherever text can be used to achieve the desired visual presentation.

508 Refresh (ANPRM) - 504.3 Resize and Reflow Text (Likely to Change)

Text content shall support the native capability of the platform for text to resize and reflow text without loss of content or functionality.

Exception: Captions and images of text are not required to conform to 504.3.

504.3 Resize and Reflow Text. Most content formats and platforms natively provide a capability for users to adjust font size. Content can be developed which interferes with this native capability and thus creates a barrier to accessibility for users with low vision.

Reflow of text is necessary because just making letters larger would result in text moving off the screen or text appearing on top of other text.

A best practice is for captions and images of text to support the resizing and reflow of text.

Another best practice is to use text, rather than images of text, wherever possible because text gives users more control over font size.

Web documents that support resize and reflow of text are sometimes described as “fluid”, “liquid”, or “elastic”.