# Zooming and scaling must not be disabled

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/meta-viewport
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<meta name="viewport">` element controls how a page is displayed on mobile devices, including its dimensions and scale. Two parameters within its `content` attribute can restrict zooming:

- **`user-scalable="no"`** — Completely disables pinch-to-zoom and other user-initiated scaling on the page.
- **`maximum-scale` set below 2** — Caps how far a user can zoom in, preventing them from reaching the 200% zoom level required by WCAG.

Both of these restrictions create serious barriers for people with low vision. Many users depend on zooming to enlarge text and interface elements to a readable size. When zooming is disabled or limited, these users may be unable to use the page at all. Screen magnification tools and native browser zoom are fundamental assistive strategies, and restricting them undermines the accessibility of the entire page.

This rule relates to **WCAG 2.0/2.1/2.2 Success Criterion 1.4.4: Resize Text (Level AA)**, which requires that text can be resized up to 200% without loss of content or functionality. By blocking zoom below that threshold, you fail this criterion. This success criterion exists because the ability to enlarge content is one of the most basic and widely used accessibility features across all platforms.

## How to Fix

1. **Remove `user-scalable="no"`** from the `content` attribute of your `<meta name="viewport">` element. If present, either delete it or set it to `user-scalable="yes"`.
2. **Remove or increase `maximum-scale`**. If you use `maximum-scale`, set it to at least `2` (which allows 200% zoom). Better yet, remove it entirely to allow unrestricted zooming.
3. **Test on mobile devices** after making changes. Verify that pinch-to-zoom works and that content remains usable when zoomed to 200%.

## Examples

### Incorrect: Zooming is completely disabled

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

The `user-scalable=no` parameter prevents users from zooming in at all.

### Incorrect: Maximum scale is too restrictive

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

Setting `maximum-scale` to `1.5` limits zoom to 150%, which is below the required 200% threshold.

### Correct: Zooming is fully allowed

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

By omitting both `user-scalable` and `maximum-scale`, the browser's default zoom behavior is preserved and users can zoom freely.

### Correct: Explicitly allowing zoom with a sufficient maximum scale

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

Here, `user-scalable=yes` explicitly permits zooming, and `maximum-scale=5` allows up to 500% zoom, well above the 200% minimum.

### Correct: Setting maximum-scale to exactly 2

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

A `maximum-scale` of `2` allows 200% zoom, meeting the minimum WCAG requirement. Allowing higher values is even better, but `2` is the minimum acceptable value.

## What This Rule Checks

The axe rule `meta-viewport` inspects the `<meta name="viewport">` element in your document's `<head>` and verifies two things:

1. The `user-scalable` parameter is **not** set to `no` (or `0`).
2. The `maximum-scale` parameter, if present, is **not** less than `2`.

If either condition is violated, the rule flags the page as having a zoom restriction that may prevent users with low vision from accessing content.
