Text size and page width: accessibility for developers

  • Author: Access iQ ®
  • Date: 1 Feb 2013
  • Access: Premium

Quick facts

The ability to control the size of text displayed on a webpage is fundamental to ensuring that many people with low vision are able to perceive web content.


  • Ensure text can be resized up to 200 per cent without loss of content or functionality
  • Do not use image of text, where possible

Most modern browsers provide a means by which the user can change the size of the text displayed. This is a reflection of the widespread need to control text size, including by people who do not identify as having a disability. Many people need to control text size only in particular circumstances.

While facilities to provide this resize functionality may be out of the control of the developer, it is part of the developer's job to ensure that neither the web content itself nor the structures that present the content prevent the user from resizing the text to suit their accessibility needs.

In some situations, the developer may also be asked to ensure that the user is made aware that a mechanism to resize text exists.

It is also worth noting that text may be present on a webpage in the form of an image and it must be made accessible too. These issues are covered in more detail in the topic on images and text alternatives for developers.

Resizing text

As part of Guideline 1.4, WCAG 2.0 provides a specific Success Criterion related to resizing text.

Success Criterion 1.4.4 Resize text states:

Except for captions and images of text, text can be resized without assistive technology up to 200 per cent without loss of content or functionality. (Level AA)

The WCAG Working Group decided that 200 per cent would be a reasonable expectation of people seeking to resize text. Above 200 per cent, it is suggested that using zoom functionality may be more effective than using text resizing, in order to retain clarity.

Text resizing makes only the text on a page larger, while zooming increases the size of everything on the webpage, including text, images and spacing. The latter can make the viewable canvas larger than the viewport can display, possibly requiring horizontal and vertical scrolling.

Both text resizing and zooming have become standard functionality in modern browsers, but may use different naming conventions and operate in slightly different ways — yet another reason to test your webpages in a range of browsers.

Note: Success Criterion 1.4.4 requires that text resizing be possible without using assistive technology. For these purposes, accessibility features in mainstream browsers are not regarded as assistive technology but as extensions of browser functionality. This is to ensure that text-resizing capability is not dependent on the use of magnifiers and is available to all users.

While most browsers do a good job of making text resizing available, the developer must consider two things:

  1. What if a user doesn't know their browser can resize text?
  2. What if a user's browser can’t resize text?

The simplest way to address both these situations is to provide explicit functionality on the webpage empowering users to change the text size.

Example 1:

One way to provide this is with JavaScript, by placing the following code into the <head></head> section of your webpage code.

<script language="JavaScript" type="text/javascript">

      function changeFontSize(inc)   {

      var p = document.getElementsByTagName('p');

      for(n=0; n<p.length; n++) {

            if(p[n].style.fontSize) {

                  var size = parseInt(p[n].style.fontSize.replace("px", ""));

            } else {

                  var size = 12;

            }

      p[n].style.fontSize = size+inc + 'px';

      }

}

</script>

Then insert this HTML where you want the resize links to appear:

<a href="javascript:changeFontSize(1)">Increase Font Size</a> <a href="javascript:changeFontSize(-1)">Decrease Font Size</a>

You can change the text of the resize link to whatever you think will work best, including using a default size upper case A next to a larger one.

Another option is to use style switching to reload the page with different style sheets that set larger or smaller font sizes.

Images of text

The use of text in images being used to convey information to the user is not considered good practice.

Success Criterion 1.4.5 Images of text states:

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)

  • Customisable: The image of text can be visually customised to the user's requirements;
  • Essential: A particular presentation of text is essential to the information being conveyed.

Meeting this criterion and thus reaching Level AA conformance requires that, wherever possible, text be presented as text and not as images of text. Styling should be used to control the visual presentation of the text.

If there is no way to style the text in a way that gives an effect equivalent to an image of the text — bearing in mind user agent limitations — then use an image, but you should be aware the txt as image requires more work to make accessible.

This also applies when the presentation of text in an image is an essential part of the function and meaning of the image. For example, the presence of text in an image comparing two typefaces is essential to the meaning of the image. In that case, the meaning of the text used is less important than the way the text is presented.

You are also able to use images of text where the visual presentation of the text can be customised, including the font, size, colour, and background. There are several excellent font-replacement and font inclusion methods you can use.

Font replacement uses JavaScript to replace each character with an image of that character at the designated size. Font inclusion technologies like @font-face offer a method for serving non-standard web fonts, called through CSS, as well as providing fall-back fonts if the browser is not modern enough. More information about @font-face can be found on their website.

Note: Level AAA conformance amends this Success Criterion to take away the allowance for appropriate technologies being available and the option of customisation.

Success Criterion 1.4.9 Images of text (no exception) states:

Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed. (Level AAA)

In all cases where images of text are used, they should be accompanied by appropriate text alternatives, and the alt text should meet the needs of people who use screen readers. People with mild vision impairments may prefer and expect to be able to customise the display of text to suit their needs.