This document is in beta. Help us by reporting issues via Github or email.
Back to the overview page
Resize text
People must be able to resize text to 200%, without losing access to any content or functionality.
On this page:
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 adaptation due, for example, to screen size, screen glare, or vision impairment. About a third of iPhone users change the default text size.
- People with reduced vision rely on font and layout resizing.
- 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 websites 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
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.
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.
More info
Sources
Contribute
This document is in beta. Help us by reporting issues via Github or email.