Did a “Zooming and Scaling Disabled” error appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read below for an explanation of this error, how it impacts your website’s accessibility, and how to fix it.
About the Zooming and Scaling Disabled Error
What is the meta viewport?
The meta viewport element is an HTML tag in the page head (meaning it’s not visible on the page) that tells browsers how to control the page’s dimensions, scaling, and the ability to zoom in and out on that page.
The HTML tag for meta viewport looks like this:
<meta name="viewport" content="width=device-width">In WordPress, the meta viewpoint is almost always controlled by your theme. In some cases, however, it may be edited on a template for a specific post type by a plugin that created that post type.
What does the Zooming and Scaling Disabled error mean?
A Zooming and Scaling Disabled error means that your post or page has the user-scalable="no" parameter in the content attribute of the <meta name="viewport"> element. This will stop people from being able to zoom in on the webpage.
How does Accessibility Checker test for zooming and scaling being disabled?
While auditing your page or post content, Accessibility Checker checks to see if a meta viewport element exists in the <head> of the page. If the meta viewport element exists, then Accessibility Checker tests to see if the content attribute contains user-scalable=no.
If the post or page has user-scalable=no, a Zooming and Scaling Disabled error will be flagged.
Here is an example of (bad) code that will flag this error:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">Impact on Accessibility
Why webpages need to be user-scalable
People who have low vision frequently zoom in on websites to make them larger and improve their ability to read text. They can do this with zoom controls in their browser or pinching actions on a mobile device.
If your website does not allow users to zoom in, it may make it impossible for low-vision users or even users with typical vision to be able to read the text.
Relevant WCAG 2.1 Success Criteria
2.4.2 Page Titled – Level A
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
How to Fix a Zooming and Scaling Disabled Error
What to do (in short)
To fix this error, you need to remove user-scalable=no from the <meta name="viewport"> element and ensure the maximum-scale parameter is not less than 2. This is likely controlled in your theme and may be set in the theme’s header.php file.
How to test that your WordPress site allows users to zoom
First, install the free Accessibility Checker WordPress plugin.
When scanning your WordPress page with Accessibility Checker, you will see the Zooming and Scaling Disabled error in the details tab of the Accessibility Checker meta box. You generally do not need to expand the error for this particular issue, but if you do, you’ll see the exact code snippet found on the page.
This is the code snippet you need to look for and modify in your website theme. You can also confirm that zooming is fully disabled by trying to zoom in on the website on both a computer and a mobile device.
How to fix disabled zoom on your WordPress website
If Accessibility Checker flags a Zooming and Scaling Disabled error on your WordPress site, this is likely a developer-level fix.
To fix the example code snippet above, you would simply need to remove user-scalable=no from the meta viewport tag so that it looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1">This tag can likely be found in your theme’s header.php file; however, it could also be added on multiple individual page templates. If your theme gets updates, you’ll want to make this change in a child theme.
What if I’m not a developer?
If you’re not a developer, you can try reaching out to your theme developer to get them to fix it for you. This is most ideal because it may result in them fixing the error in all websites built with their theme via a mass update. We always recommend reporting accessibility errors to theme and plugin developers so they have the opportunity to improve their products for everyone using them.
If you don’t have a developer to help with fixes and the theme developer will not fix the problem, our accessibility audit and remediation plans may be a good fit. They grant you access to a team of experienced developers and auditors to help you make your website more accessible.
