Handling Zoom, enlarging text size

Introduction

Text size enlargement is used by many users (elderly people, people with visual impairments and people that should wear glasses and don’t…). There are two accessibility requirements, one is being able to enlarge the text up to 200% without loss of information and the second one is using the global browser's zooming at 200%, all this without overlapping, loss of content or functionalities. At this zoom level, the presentation may be altered, but the text must remain readable (no text must be truncated or superposed).

Default zoom level

All current browsers offer the possibility to zoom the page. This option enlarges the entire page (text, images, the spacing between the different areas of the page…). Although this option is appropriate for occasional users, the drawback is that it adds horizontal scrollbars that make reading difficult for some users. At Orange, we have decided to use as the only test method for the WCAG 1.4.4 Resize Text criterion, the text zoom only at 200%.

Identifying the problem

Example of a page with a zoom set to 100%

The following example simulates the browser default zoom. The entire page is enlarged, two scrollbars appear (horizontal and vertical). The text is difficult to read without interactions.

In the last example, we simulate enlarging only the text size. In this case, the width of the page remains unchanged, visually it adds only a vertical scrollbar. Reading the text is much simpler.

Zoom text only

Fortunately, some browsers allow enlarging only the text size. This is the case for Firefox (available from the View menu > Zoom > Zoom text only).

When this option is enabled with a 200% zoom (in Firefox press Ctrl + four times), your page may not be displayed correctly. It is often because non-relative length units (px, pt) are used.

Relative length units

Using relative length units such as %, em, or rem on the text size, but also on containers size (div height and width) allows to minimize the problems. Indeed, a container with adaptive size can enlarge without hiding or truncating the text inside it.

Invalid example

This example uses pixel as a size unit on the elements.

Valid example

There are several ways to fix the problem, for example by using a relative size unit on the elements’ height.

E.g., you can replace:
height: 450px;

With a variable length unit depending on the size of characters:
height: 45rem;

Or more easily, keeping the pixels, but specifying a minimum height:
min-height: 450px;

Open example 2

Conclusion

It is essential to test your pages with the zoom set to 200% and “Zoom Text Only” option enabled. This is what we recommend at Orange, and it's the only way to ensure your pages remain readable regardless of screen size. While these developments are often simply best practices in responsive web design, or even minor corrections, they can drastically improve how information is perceived by some users.