---
title: Viewport Allows Zoom | Accessibility Rule
description: Zooming and scaling must not be disabled. Why the meta-viewport rule
  fails (WCAG 2.0, critical impact), how to fix it and how to catch it with TestingBot.
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/meta-viewport
  md: https://testingbot.com/support/accessibility/web/rules/meta-viewport.md
---

# Ensure \<meta name="viewport"\> does not disable text scaling and zooming

Rule ID: meta-viewport User Impact: critical Guidelines: WCAG 2.0

The `<meta name="viewport">` element should be configured to allow users to zoom and scale content, which is essential for accessibility, particularly for individuals with low vision.

## About This Rule

This guideline ensures that users can zoom and scale web content, enhancing accessibility for individuals with low vision. Adhering to this practice aligns with the following standards:

- WCAG 2.1 (AA): 1.4.4 Resize Text
- WCAG 2.0 (AA): 1.4.4 Resize Text
- WCAG 2.2 (AA): 1.4.4 Resize Text
- EN 301 549

## Why It Matters

Disabling zooming or limiting scaling can hinder users with visual impairments from adjusting content to a comfortable size, adversely affecting readability and navigation. Allowing users to control the zoom level ensures that web content is accessible to a broader audience. :contentReference[oaicite:0]{index=0}

## How to Fix

To ensure accessibility:

- **Allow User Scaling:** Remove the `user-scalable="no"` parameter from the `<meta name="viewport">` element to permit user zooming. 

```html
<!-- Remove this -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<!-- Use this instead -->
<meta name="viewport" content="width=device-width, initial-scale=1">
```

- **Set Appropriate Maximum Scale:** Ensure that the `maximum-scale` parameter, if specified, is not less than 2 to allow sufficient zooming capability. 

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
```

### Examples

#### Incorrect

Disabling user scaling:

```html
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
```

#### Correct

Allowing user scaling with appropriate maximum scale:

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
```

## More Information

- [H76: Using meta refresh to create an instant client-side redirect](https://www.w3.org/TR/WCAG20-TECHS/H76.html)
- [F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page](https://www.w3.org/TR/WCAG20-TECHS/F41.html)

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [nested-interactive](https://testingbot.com/support/accessibility/web/rules/nested-interactive)
- [no-autoplay-audio](https://testingbot.com/support/accessibility/web/rules/no-autoplay-audio)
- [object-alt](https://testingbot.com/support/accessibility/web/rules/object-alt)
- [role-img-alt](https://testingbot.com/support/accessibility/web/rules/role-img-alt)
- [scrollable-region-focusable](https://testingbot.com/support/accessibility/web/rules/scrollable-region-focusable)