1.4.4 - Resize text

Summary

It must be possible to increase the size of text to 200%, without losing access to any content or functionality.

Requirements

• When the whole page, or its text content only, is enlarged, all information and functionality should remain available.
• Ensure that the content and layout of the page responds to users changing the Operating System's or Web Browser's default font size.
• Ensure that pinch to "zoom" is supported on web pages.

Why?

This ensures that partially sighted people can comfortably read content and see the interface well.

• All users benefit when they can adapt the size of content to see and read it. This may be a constant or temporary adaption due, for example, to screen size, screen glare, or vision impairment. About a third of iOS users change the default text size.
• People with reduced vision rely on font and layout resizing to use websites and apps.
• Some Operating Systems allow users to zoom on a portion of the screen. But using that alone offers a very poor user experience, and modern website and apps are expected to support text resizing and dynamic layout.

Official wording in the Web Content Accessibility Guidelines

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)

See the W3C's detailed explanation of this guideline with techniques and examples.

Guidance for Design

More guidance for design

• See section 3 'Structure and semantics' of Deque's Web Accessibility Quick Checklist for Designers

Guidance for Web

Using relative size units to support font resizing

• Support font resizing by using relative size units (such as rem and em, rather than px).

• Use relatize size units to size elements on the page to ensure that the page content and layout gracefully adjust to users' changing the Operating System or Web Browser's default font size. Content and functionality shoudn't become unavailable or cut-off.

Ensuring the viewport meta tag is set to permit "pinch-to-zoom" scaling on touch screens

Example

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Failure examples

<!-- Don't do this -->
<meta name="viewport" content="user-scalable=no" />

<!-- Don't do this -->
<meta
  name="viewport"
  content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;"
/>

Common mistakes

• Setting an element's size in px, rather than using relative size units.