Text Zoom Accessibility Tips

Text Zoom Accessibility Tips

Back in the day when a user would use Ctrl/Cmd with +/- keys to zoom in and out, browsers would increase the text size only. This would increase readability with plain text content, but static content, such as imagery, would remain.

Today, when someone uses the browser default zoom feature, modern browsers zoom by decreasing the viewport size; as content increases, CSS breakpoints will fire and display content designed for smaller screens. This results in everything appearing larger while remaining readable.

While the modern-day viewport zoom feature is appreciated, some folks still use tooling to increase text size only. Depending on how the CSS was coded, zooming text only could lead to some accessibility barriers, mostly readability of plain text content.

According to 1.4.4 Resize text, users should be able to zoom up to 200% and still have text content be readable.

Problematic CSS

These issues usually stem from CSS which utilizes static units, that is, pixels for sizing. Take the following example:

.card {
  height: 200px;
  overflow: hidden;
  width: 400px;
}

With this CSS, when someone zooms in via text, the static sizing will restrict readability of the text; content sizing will increase but text will be restricted from view.

Flexible sizing units

To get around this issue, allow for text and content containers to grow organically when text is resized. When writing accessible CSS, static sizing units such as px are to be avoided. Whenever possible, use flexible units such as %, em, or rem.

.card {
  height: 12.5rem;
  overflow: hidden;
  width: 25rem;
}

With this CSS in place, the content container will now resize along with the text when a text-only zoom is initiated. This is due to the em unit sizing being based on the container font size.

Check out the demo:

How to test

There are some Chrome browser extensions you could use to test, but what's recommended is to use the built-in text zoom functionality with Firefox. Here's how to accomplish this:

  1. Load the website in question with Firefox
  2. Ensure text zoom is enabled by going to "View", select "Zoom", and select "Zoom Text Only"
  3. Adjust the text size to 200% using the Cmd/Ctrl and + keys, and view the page content

What's expected is as text increases in size, elements scale accordingly. However, often what actually takes place is as text increases in size, content is obscured and difficult to read. This is the accessibility barrier we need to avoid.

Remember, what's important here is that text content is readable and consumable. Often when text is zoomed to 200%, the layout and other pieces may appear less than ideal, but if the content is readable you'll have satisfied this requirement.

WCAG success criteria

This comes back to 1.4.4 Resize text which states:

"Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality."

Resources:

Back to blog