Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Text scaling and zooming disabled (A11y Best Practice Violation)

How to fix the web accessibility issue of text scaling and zooming being disabled in viewport meta tag — Lumar Web Accessibility Wiki

Sensory and Visual - Lumar Website Accessibility Issues Thumbnail

What does this accessibility issue mean?

Issue summary: Text scaling and zooming are disabled in the viewport meta tag

If a viewport meta tag specifies a large initial scale for text, it can cause content to appear too small on mobile devices, making it difficult for users to read and interact with. 

Allowing for appropriate text scaling and zooming across all device types ensures users can view the page content without straining their eyes. Website content should be accessible and easy to read and interact with regardless of device type or large-text settings that may be preferred by users with visual or cognitive impairments. 


Ensure <meta name=”viewport”> elements can scale a significant amount. 

Issue details

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

Example HTML violation: Text scaling and zooming disabled (A11y Best Practice Violation)

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0">
    <title>Non-Accessible Webpage</title>
    <h1>Welcome to My Non-Accessible Page</h1>
    <p>This page restricts users from zooming or scaling content on mobile devices.</p>

The above HTML violates the meta-viewport-large accessibility rule because of the meta tag that includes the maximum-scale attribute. According to accessibility practices like the WCAG 2 rule, it is important to allow users to zoom or scale the content as required. Therefore, the meta viewport tag should not restrict the maximum scale.


How to fix "Text scaling and zooming disabled (A11y Best Practice Violation)" issue

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

The above tag defines viewport properties as follows:

  • width=device-width makes the layout viewport match the device's width, which is typically necessary for responsive design.
  • initial-scale=1.0 sets the initial zoom level when the page loads.

Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform