# Respect Zoom

**NEVER** · **ID:** `interactions-respect-zoom` · **Category:** interactions
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-respect-zoom

> NEVER: Disable browser zoom

Never disable browser zoom

Browser zoom is an accessibility feature used by people with low vision. Disabling it via viewport meta tags or CSS makes your site inaccessible. Always allow users to zoom in and out as needed.

## Bad — do not do this

`interactions-respect-zoom-bad`

```tsx
export function RespectZoomBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="bg-error/10 border border-error/20 rounded-lg p-3 mb-4">
          <code className="text-xs text-error-foreground font-mono block">
            {'<meta name="viewport" content="'}
            <span className="bg-error/30">maximum-scale=1, user-scalable=no</span>
            {'" />'}
          </code>
        </div>
        <p className="text-sm text-muted-foreground">
          This viewport meta tag prevents users from zooming. This is harmful for users with low vision who need to zoom to read content.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        Disabling zoom removes an important accessibility feature
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-respect-zoom-good`

```tsx
export function RespectZoomGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="bg-success/10 border border-success/20 rounded-lg p-3 mb-4">
          <code className="text-xs text-success-foreground font-mono block">
            {'<meta name="viewport" content="width=device-width, initial-scale=1" />'}
          </code>
        </div>
        <p className="text-sm text-muted-foreground">
          This viewport meta tag allows users to zoom freely. Users can pinch-to-zoom or use browser zoom controls as needed.
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        Users can zoom freely for accessibility needs
      </p>
    </div>
  );
}
```

## References

- [WCAG: Resize Text](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html)