If your users can’t zoom in on your content, you’re probably making a mistake. Zooming (or scaling) is common, expected user behavior, and in general, you shouldn’t prevent your users from adapting your content to their preferences.
In this article, we’ll discuss the methods that developers use to disable zooming — and how those techniques can cause unnecessary frustration for people with disabilities.
People who have vision-related disabilities may scale content to make text more readable, and people with certain neurocognitive differences may use the same approach to focus on a single line or paragraph.
When zooming is disabled, these users are forced to find other ways to read your content. Some people might take screenshots, while others might use dedicated screen magnifier applications.
Needless to say, most people would prefer native accessibility. You don’t want to force your users to download software or use complicated workarounds to view your website.
The HTML meta tag attribute "user-scalable=no" can restrict users from zooming, which may be defensible in certain situations. For example, if you’re building a web game or desktop-like application, zooming might detract from the user experience.
More commonly, developers disable zooming to fix presentation issues. The user-scalable tag is usually paired with additional markup that renders the page at the width of the device while preventing zooming. For example:
<meta meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
In this example, “maximum-scale=1" is also intended to disable scaling. By setting the value at 1, the tag essentially prevents the user’s viewport from changing.
Both tags are overused, and as a result, many desktop browsers ignore “user-scalable=no” and “maximum-scale=1" by default. Mobile browsers may support these tags to various degrees: iOS Safari ignores these tags, but at the time of writing, both methods still work on Chrome on Android.
Related: How CSS Benefits Accessibility
Developers frequently misuse the “user-scalable" tag to prevent mobile browsers from automatically zooming in on text input fields. This seems like a logical place to disable zooming — but there’s usually an alternative.
One common workaround: Providing form input elements with a minimum font size of 16px prevents most mobile browsers from scaling form elements by default. This method requires some work with your website’s CSS, but it avoids restricting manual zoom.
Related: Make Your Digital Media More Accessible By Providing Options
The Web Content Accessibility Guidelines (WCAG) is widely considered the international standards for digital accessibility. Most websites should aim for Level AA conformance with the latest version of WCAG, which means following all Level A and Level AA success criteria (read more about WCAG Level A, AA, and AAA).
WCAG Success Criterion 1.4.4, “Resize Text," requires that text can be resized without assistive technology up to 200% without the loss of content or functionality, with exceptions for captions and images of text.
By disabling zooming, some websites fail this criterion. While it’s possible to disable scaling while fulfilling this requirement in other ways — for example, by providing an on-site control for changing the scale of the page — the simplest way to follow the guideline is to build a responsive website that allows scaling.
Related: Does WCAG 2.1 Require Responsive Design?
People with disabilities use a wide variety of techniques to adapt content to their preferences. When you restrict them from performing certain actions — such as scaling your website to make it readable — accessibility suffers.
In most situations, there’s no good reason to prevent zooming. You can often use CSS to achieve a visual aesthetic without creating unnecessary limitations, which accommodates a wider variety of users.
For more guidance, send us a message to connect with an accessibility expert.