[user-scalable = “no”] and [maximum-scale] Errors of Lighthouse

What do you think about zooming and scaling? The experience your website provides to users is closely related to its UX score. And of course, we now know what UX means much better than before: A high rate of accessibility, availability, and findability are among the most basic principles of UX. If you also care about your website giving the best results in all these respects, you may be confused by a warning shown among the Accessibility audits of Google Lighthouse: [user-scalable = "no"] is used in the <meta name = "viewport"element or the [maximum-scale] attribute is less than 5.

So what exactly does this mean? When you see this audit in Google Lighthouse, how do you know exactly what the problem is and how can you solve it? Today we will talk about [user-scalable = "no"] and [maximum-scale] attribute is less than 5 problems with Screpy experts in full detail.

Before starting everything, let’s give a small note: Screpy, which allows you to do full tracking of your site, works with Google Lighthouse integration. How so?

From now on, you don’t have to use multiple platforms to understand how your site is performing in terms of different metrics. Thanks to Screpy’s Google Lighthouse integration, you can easily and quickly perform all audits and take a look at the warnings offered by Lighthouse. There is also a small bonus: Thanks to Screpy’s advanced AI-powered task system, there is someone who can tell you how to solve each audit! Now your site’s optimization processes are much easier than before, folks!

Do you want to increase your website traffic?

Try for free to boost your website traffic!

Register Now

Why Does [user-scalable=”no”] and  [maximum-scale] Audits Matter?

The main thing that this warning, which was shown as a result of the accessibility check, tries to tell is this:

A visitor using your site in modern browsers should be able to zoom up to 500% of the content on your page. If you do not offer this option, you are causing your users to visit the site with a low UX. Here, the presence of the attribute named user-scalable = “no” or setting the maximum-scale to be less than 5 prevents this.

This is easily revealed by Google Lighthouse scans of your site. Google Lighthouse, which produces laboratory data, navigates your site by acting as a visitor and offers you an audit by arcing that it is impossible to zoom.

• The user-scalable = "no" parameter in the <meta name = "viewport"> attribute: This type of parameter in the code resource resets the zoom chance within the site. Users cannot zoom in any way on their mobile device or desktop, and this creates a serious problem, especially when the text is small and the device is different from the anticipated size.
• Setting the maximum-scale attributes to be less than 5: Users can zoom in on this type of page, but it is not enough. Up to 500% zoom is not available. This negatively affects the user experience.

Why Zooming and Scaling Must Not Be Disabled?

Particularly partial or low vision users want to zoom in on your site to see a photo or word more clearly while spending time on your website. Browsers generally do not prefer to focus on content in a particular area. Instead, they present content to users at a display level where everything on that page can be visible. Users want to be able to zoom in the direction they request.

If the screen space provided by the user’s browser is small (this may be true for both desktop and mobile users), the text will appear much smaller so that the entire page can be displayed in the browser. Users optimize their experience by zooming in on certain areas as needed.

Generally, under The Web Content Accessibility Guidelines, what Google says is this: You should serve your web page to users that allow for at least 200% zoom. The best practice is to allow for 500% zooming and edit the source code this way.

If this situation requires you to change your theme or other features of your site, other features may also give negative results in terms of UX. That’s why it’s a good idea to do a detailed review.

Google Lighthouse Audit About Scaling and Zoom

As a result of accessibility checks, Google Lighthouse may realize that users’ sites cannot provide a strong enough service in scaling and zooming. In this case, a warning will appear in front of the user. This warning says the following:

[user-scalable = ”no”] is used in the <meta name = "viewport"> element or the [maximum-scale] attribute is less than 5

If you wish, let’s share the screenshot of Google Lighthouse with you:

Do you want to increase your website traffic?

Try for free to boost your website traffic!

Register Now

The above warning consists of three basic parts:

1. Warning title: It says exactly which problem the warning is with.
2. Warning explanation: Here, website owners are informed about what kind of negative experiences the problem in question can lead to, and a link is left for those who want to learn more.
3. Failing elements: While Google Lighthouse notifies users of the problem it has found as a result of the lab experiment, also tell them exactly where this problem is. Within the failing elements, the code snippet causing the problem is displayed to the user. In this way, the user can quickly solve the problem by searching for it in the source code.

If you get a warning like the one above, there could be two different reasons:

1. user-scalable = It is a content attribute can be customized with the “no” parameter. In this case, users cannot zoom in any way. Google Lighthouse issues this warning.
2. maximum-scale = A number less than 5 may be specified for the maximum-scale parameter on your site. In this case, zooming options are reduced. Google Lighthouse issues this warning.

How to pass the Zoom or Scaling Audit of Google Lighthouse?

Google Lighthouse is a platform where you can check your site regularly and track the progress of the problems. After receiving a certain warning on this platform, you can create an audit again by correcting them. So this time, you can check whether you have passed the audit. The way to fix the problem is as follows:

1. First of all, you need to come to the viewpoint metatag.
2. If there is a user-scalable = "no" parameter here, find it first. If you delete it, the user disabling situation will disappear.
3. If your problem is not solved yet, find the maximum-scale parameter in the source code and look at the given value for it. If this value is less than five, increase it and correct it. In this way, you will easily pass the relevant parameter of Google Lighthouse and increase the UX values.

What is the User Impact of [user-scalable = ”no”] and [maximum-scale] Audits?

First of all, we need to say that every audit that takes place comes together with others and creates a high user effect. This audit and [user-scalable = ”no”] and [maximum-scale] errors have a minor user impact value. However, it is very important for websites that frequently receive visitors on mobile devices to correct this error. In this way, those with low vision can easily experience the site.

Other Optimizations for Scaling and Zooming

In order to optimize scaling and zooming, you must first understand the viewport metatag. The viewport element in the source code of a website is located at the beginning of the HTML document. It gives important information to the browser: How should a page be rendered?

If you wish, let’s examine it on an example. For example, the code snippet below tells the browser to flexibly adjust the size of the content on the site according to the size of the device in the user’s hand.

<meta name=”viewport” content=”width=device-width,initial-scale=1">

Remember: The browser will only allow scaling if it receives this order. If you do not provide such information or instructions in your code snippet, the browser will block zoom or scaling for users.

Viewport Scaling

Users use their fingers to zoom in or out on a page while on their mobile device: pinch gesture. If you set the viewport scaling to change responsively according to the width of the device from the very beginning, users can easily read all your content without having to zoom in.

Remember: It is important to give users a chance to zoom and scaling on a web page. But the main thing is to offer page quality so that they can read the content without having to do this.

So how can you do that?

• It’s pretty simple actually. You can easily do this by setting an initial scaling rate. Setting the viewpoint scaling to one will be enough for this. Check out the code below:

<meta name=”viewport” content=”initial-scale=1">

• If you do not want users entering your site to scroll, you need to make the same setting here. To do this, set the maximum-scale attribute to one, so that the page in front of the user will cover the device’s screen so that no scrolling can be made, and no tampering or changes can be made on it.
• If there is such a setting on the website, it means that the maximum-scale is one, which is actually default. Therefore, zooming or scrolling is not possible. Here is a code snippet example of this for you:

<meta name=”viewport” content=”maximum-scale=1">

• Not all of them are limited to this. To create a zoom permission on your website, consider this: The minimum-scale parameter also defines the minimum chance of zooming. In fact, the working principle of this parameter is exactly the same as maximum-scale, but this time it deals with the minimum value. If the maximum scale on your site is too large and you want to set the minimum, you can use a code snippet like the following:

<meta name=”viewport” content=”minimum-scale=1">

• Finally, if you do want a user to zoom in on your web page, the element you should use is user-scalable = yes. This is also the default setting. If you want to prevent users from zooming, you must use the user-scalable = no element. We have shared a snippet for you below that allows users to zoom. You can examine:

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

What is the Difference Between Zoom and Scale?

When you are editing your website settings, you may be surprised at first when you come across two words scaling and zoom. What are the differences between these two? Why are we talking about two different concepts?

Let’s say it right away: Yes, because these two are different concepts.

Zoom does not change the size of any content on your website. What this command does is change how they appear on the screen. Actually, think of it like magic: someone brings it closer and it looks like the image is bigger. In fact, the size is still the same inside the page.

But scaling is different than that. Moreover, with the popularization of mobile-first indexing, scaling has become much more interested than before. Because this concept means that the content or images on your website change size according to the size of the device and become responsive. When we set the viewpoint scaling as 1 in the example above with you, we actually changed the dimensions of the images themselves. Because on a smaller screen, the visual dimensions have shrunk, while on a larger screen the visual dimensions have increased.

Think of it like this: if the size of the image is 256×256 pixels when a user zooms in on a page, this size does not change after zooming. But if you enlarge that image by 25 percent, the size of the new image will be 64X64.

How Screpy Can Help You with Accessibility Audits?

Screpy works in integration with platforms such as Google Lighthouse and Chrome DevTools. Our goal is to prevent you from having to try to work on a different platform for each of these types of audits. And instead, we ensure that you can control everything from a single platform. This is exactly why you can perform all the audits of Google Lighthouse from accessibility to performance from here. Also, you can learn how to solve the warnings given by our task contents. Check out the brief task content we have created for [user-scalable = ”no”] and [maximum-scale] warnings.

Test Your Website Issues

You can quickly analyze your site

Analyze!

You May Also Like

• Technical SEO and Accessibility: Explore The Relationship
• Unsafe links to the cross-origin destinations
• The Font Size in the Document is not Legible
• The Size of the Images
• Broken canonical links