Relative Sizing

Public Article

The content of this article is certified for accuracy by the Digital Accessibility Centre.

Sizing

Requirements

The user can increase the size of text (including image text by 200%) either through using browser controls or bespoke text resize ‘widgets’.
When text is resized using either one of these methods, content is not lost or obscured.
When text is resized using either one of the methods listed above horizontal scrolling is not forced when viewed in a resolution of 1024x768
Avoid horizontal scrolling.

Full explanation

The relative sizing of text allows a user to scale text according to their preference using the browser controls. By providing resizable text there is less of a need for the user to have screen magnification software. The use of “liquid” layouts that can be viewed at a wide range of screen sizes and on a wide range of devices is preferred.

Resizing Text

1.4.4 Resizing Text (AA) Relative Sizing

This test ensures that when a web page is magnified, text size increases to scale without any content overlapping or disappearing. The content must be fully readable and functional when magnified (although horizontal or vertical scrolling may be required).

Ensure that information or content is not lost when the page is magnified. Otherwise, text can be distorted or hidden by images on the page, making it difficult for people to read.

Tools required

IE11, Firefox or Chrome

Exceptions

This test concerns page zoom, which changes the size of everything in the browser window, not only text but also images. If the content is pushed outside the browser viewport but remains available by horizontally or vertically scrolling the page, this is not a failure.

How to test

Using IE11, Firefox or Chrome, open the web page to be tested.
Zoom the whole page (not just text) to 200%. In IE11 and Firefox, press CTRL + + (or CMD + + on a Mac) six times to set page zoom to 200%. In Chrome, use the same keyboard command only five times to zoom to 200%.

Potential access issues

When zooming the page to 200% you notice:

Text is obscured and made illegible.
Form fields are obscured.
Menu, buttons or links are obscured or disappear.
Some elements are displayed on top of other elements such that their meaning changes or is difficult to determine.
Do Not Suppress zoom capabilities on a mobile design

Don’t do this:

<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;” name=”viewport”>

or:

<meta name=”viewport” content=”user-scalable=no” />

Do this:

<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;” name=”viewport”>

or:

<meta name=”viewport” content=”user-scalable=YES” />

Relative Sizing was posted on 14/02/2023 @ 15:54