200% Zoom & Device Sizes

Key Points:

- Good for people with Low Vision & Hand Mobility disabilities.

- Content must be able to resize correctly at 200% zoom.

- Avoid use of horizontal & vertical scroll bars to access regular page content.

- Code should ensure content reorders itself in a user-friendly way to suit their device size.

Introduction

With so many people using small devices (e.g. smartphones) on a daily basis, digital content needs to be coded to allow access for people with low vision and hand mobility disabilities.

You might be surprised to learn that one of the easiest ways to include low vision users as part of your audience, is simply to ensure your code allows people to pinch & zoom smaller devices to view your content.

Examples of smaller devices include smartphones, tablets & notebooks.

When viewport code is restricted for small screen sizes, people do not have the option to pinch & zoom screens.

Something like the following HTML code (applied in the Head section) can allow low vision users to pinch & zoom a phone screen: meta name="viewport" content="width=device-width, initial-scale=1".

In addition to this, appropriate use of CSS @media query breakpoints is also important so that sites resize well for different device sizes. Coders refer to these “breakpoints” as device viewport widths where site content can break or appears missing.

Some commonly used breakpoints for different device sizes are:

- Smartphones; 320px (portrait mode) & 480px (landscape mode).

- Tablets; 600px (portrait mode) & 800px (landscape mode).

- Desktop computer ; 768px (screen height) & 1280px (screen width).

Two very important criteria that are required:

1). Resize Text (WCAG Success Criteria 1.4.4)

This is very important for people with low vision and it states that users should be able to zoom to 200% on their devices as standard, without losing text content.

However, on small mobile devices some users with low vision may zoom to 200% and also choose to increase their phone’s zoom settings for the phone device itself.

If that is the case, then screen size & resolution must also be taken into account to ensure digital content is not lost with magnification on smaller devices. Without considering this, some sites can break on small devices for some users.

It is also important to note that images of text do not scale as well as normal text because images tend to pixelate, so it is far better to use normal text instead of using images of text.

2). Reflow of Content (WCAG Success Criteria 1.4.10)

This is also very important for people with low vision and for people with hand mobility disabilities.

Reflow creates a user-friendly experience by presenting content in a single column, instead of requiring that the user must scroll in more than one direction (i.e. people with low vision and / or hand mobility disabilities find it difficult to use vertical & horizontal scroll bars).

In essence, Reflow allows page content to wrap around & fit the device screen size in use.

For example, a website seen on a wide desktop computer screen might have 3 columns of content displayed on the screen. The same website when viewed on a mobile phone screen would have the same content, but it is displayed all in one single column so as to fit the narrow screen.

Reflow ensures content should be presented without any loss of information or functionality.

The real value of Reflow means people are not forced to use a vertical or horizontal scroll bars to see all content.

Smaller devices (e.g. smartphones) are designed for close viewing, compared to larger screens that are best viewed from farther away. That means when the same content is viewed at the intended distance for each device size, our eyes view the content at the effectively the same size.

To explain this further, the following relates to mobile phone screen size:

- Content reorganised and displayed vertically (e.g. mobile device portrait view), should fit a width of 320 CSS pixels (px).

(320px is derived from a desktop viewport width of 1280px wide at 400% zoom, i.e. four times the default width and four times the default height).

- Content reorganised and displayed horizontally (e.g. mobile device landscape view), should fit a width of 256 CSS pixels.

(256px is derived from a desktop viewport height of 1024px at 400% zoom, i.e. four times the default height and four times the default width).

All the above also applies to world language texts; some are written horizontally (e.g. English), and some are written vertically (e.g. Japanese). The only exemptions are two-dimensional data tables & maps (however, alternative HTML versions may be worth exploring to allow a more inclusive experience for all users).

It is also worth noting that browsers on mobile operating systems do not combine reflow and zoom in the same way as on desktop browsers.

Mobile browsers support Reflow of content when changing the orientation of the device (portrait or landscape modes), but they can only magnify content to achieve Resize Text using a pinch gesture to zoom content, or by using double tap on the screen.

That can sometimes mean zoomed mobile browser content requires the user to use two-dimensional scroll bars (e.g. for maps, data tables, etc.), regardless of how digital content is coded.

Conclusion:

WCAG Resize Text must be active so that users can be allowed to increase the size of all text up to 200%, along with required WCAG Reflow criterion.

It is not required to achieve 200% text enlargement while remaining inside a specific breakpoint (as zooming may result in a new breakpoint becoming active), but it should still be possible to get 200% enlargement in order to satisfy the Resize Text criterion.

Reference terms to be aware of:

Screen size refers to the size of a screen described by the length of its diagonal (the diagonal distance between opposite corners of the screen).

Resolution refers to screen width × height, with the units in pixels, e.g. 1024 × 768 means the width is 1024 pixels, and the height is 768 pixels. Low resolution images contain larger pixels in fewer numbers that create images with poor detail. Conversely, high resolution images have much higher numbers of pixels and therefore much better image quality / increased detail & clarity.

Pixel (px) refers to a tiny square or dot that represents a single point of color on a screen. The more pixels there are, the more fine detail the image / element has on the screen.

PPI refers to Pixels per inch (PPI), i.e. the number of pixels contained within each inch of a digital image. It also refers to the set number of pixels a screen can display.