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)

Description

When we develop accessible websites, the first thought that comes to the mind is the visually challenged users. The next immediate technical thought is to provide options such as text resizing, contrasting colors. It is even true as per W3C web content accessibility guidelines 2.0.(External website)

Unfortunately content developers forget about the browser resizing option. Text resizing option is facilitated in almost all the browsers. Even the mobile browsers Safari on IOS and Chrome on Android have the text resizing option. It is advised to make the content resizable using the browsers resize option than relying on text resize option for each website we develop, though doing so is no harm.

Using such options on various browsers and operating systems are explained later in the article.

To ensure that the text can be resized accurately without loss or functionality, the units of measurements should be determined in relative size.

Specifying containers size:

The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls. The containers that does not specify the width and height in “em” units may result in text cropping when the text is resized.

Provide the height and width of containers in “em” units.

Eg: The navigation container below specifies the height and width in “em”.

<div id=”top_nav” role=”navigation” width=”20em” height=”35em”>
Navigation links
</div>
For external styles
#top_nav
{
width: 20em;
Height:35em;
}

Specifying font sizes

When absolute units are used for specifying font size, some browsers do not allow the text re-sizing even the user agents provide such options. To ensure that the containers are resized the text also should be re-sized proportionately. Use font size in “%” (percent) for an accurate text re-size.

Eg, If the level one headings should be double of normal font size, use the following style in the CSS.

h1
{
Font-size: 200%;
}

How to test

Every browser will have a text re-size option. Do the following steps to ensure that the text is properly resized in various browsers.

In Firefox press “control + +” 6 times to increase exactly twice with that of the normal text size i.e. 200%. Do the following in other browsers and ensure that the text is not moving off screen, cropped or overlapped on surrounding content.

Steps for text resizing in desktop browsers

Microsoft Internet Explorer

1. Open the website in Internet explorer.
2. Go to View menu (Alt + V).
3. Go to text resize option (x).
4. Select any of the options largest (G), larger (l), medium(m), Smaller (s) and smallest (a) available.

Mozilla Firefox

1. Open the website in Mozilla Firefox.
2. Go to view menu (Alt + v).
3. Go to zoom option (z).
4. Ensure that Zoom Text (t) check box is checked.
5. Use Zoom out (Control + +) to increase text size and Zoom in (control + -) to decrease the text size.
6. Text can be resized as much as you want with the same option.

Alternately when the browser is opened use control + + (plus) to increase the text size and control + – (minus) to decrease the text size. Ensure that the zoom text checkbox is checked in either of the cases.

Google Chrome

1. Open the website in Google Chrome.
2. Go to Toolbar (alt key).
3. Navigate down to the options Make text smaller (control + -) and Make text larger (control +).
4. Text can be resized as much as you want with the same option.

Alternately when the browser is opened use control + + (plus) to increase the text size and control + – (minus) to decrease the text size.

Steps for text resizing in mobile browsers

Safari on IOS

1. Open the website on Safari.
2. Find the option “Reader” below the address bar.
3. Go to the Text resize option.
4. Here find the options increase and decrease buttons.
5. Text can be increased or decreased as much you want.

Google Chrome on Android

1. Go to more options on the browser after the tab switcher.
2. Swipe until Settings.
3. In settings swipe until accessibility.
4. In accessibility swipe until text scali

Note

Providing a separate widget for text resizing on every website is a debatable concept. I have gone through various articles while writing this one including one by Jared Smith of WebAIM (External website). I would leave it to the consultants and clients to take a decision depending on the target audience of the website.