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…). One of the accessibility requirements is being able to enlarge the text up to 200% without loss of information. 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.

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.

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 the only way to check if your pages are readable. Although corrections can be minor, they can totally change the way information is perceived by some users.