Os utilizadores devem ser capazes de fazer zoom e dimensionar o texto até 500%

O elemento <meta name="viewport"> controla como uma página é exibida em layouts móveis e responsivos. Dois dos seus parâmetros — user-scalable e maximum-scale — afetam diretamente se os utilizadores podem fazer zoom no conteúdo da página. Definir user-scalable="no" desativa completamente o pinch-to-zoom e os controlos de zoom do browser, enquanto um valor baixo de maximum-scale (por exemplo, 1 ou 2) limita o quão longe um utilizador pode fazer zoom.

Porque isto é importante

Pessoas com baixa visão frequentemente dependem de zoom e ampliação de ecrã para ler conteúdo web. Quando o zoom está desabilitado ou restringido, estes utilizadores podem ser incapazes de perceber texto, imagens ou elementos interativos. Isto cria uma barreira significativa ao acesso à informação.

O Critério de Sucesso 1.4.4 das WCAG (Redimensionar Texto) requer que o texto possa ser redimensionado até 200% sem perda de conteúdo ou funcionalidade. No entanto, como uma boa prática recomendada pela Deque, as páginas devem suportar zoom até 500% (5x). Este limite mais elevado acomoda melhor os utilizadores que precisam de ampliação substancial e alinha-se com o princípio de fornecer a mais ampla gama possível de acessibilidade.

Esta regra é classificada como uma Boa Prática da Deque e afeta principalmente utilizadores com baixa visão. Embora vá além do requisito estrito de 200% das WCAG, suportar zoom de 5x é uma melhoria significativa que não custa nada implementar.

Como corrigir

1. Remova user-scalable="no" do atributo content do elemento <meta name="viewport">. Se estiver presente, remova-o completamente ou defina-o como yes.
2. Certifique-se de que maximum-scale é pelo menos 5 (representando 500% de zoom). Se não precisar de limitar o zoom de todo, simplesmente omita o parâmetro maximum-scale — os browsers permitirão zoom irrestrito por defeito.

Exemplos

Incorreto: zoom desabilitado

Esta meta tag viewport impede completamente que os utilizadores façam zoom:

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

Incorreto: zoom restrito abaixo de 500%

Esta meta tag viewport limita o zoom a 200%, o que fica aquém dos 500% recomendados:

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

Correto: zoom permitido até 500%

Esta meta tag viewport permite explicitamente o zoom e define a escala máxima para 5:

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

Correto: sem restrições de zoom

A abordagem mais simples e acessível é omitir completamente tanto user-scalable como maximum-scale, permitindo que o browser gira o zoom sem limites:

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

Correto: habilitação explícita do dimensionamento do utilizador

Também pode definir explicitamente user-scalable=yes para clareza, embora este seja o comportamento padrão:

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

Pontos-chave

• O viewport do browser (a área visível da página) é separado do foco programático. Quando um utilizador faz zoom, apenas uma porção da página fica visível de cada vez, mas o foco não segue automaticamente o viewport. Este é um comportamento esperado — os utilizadores fazem scroll e navegam para encontrar conteúdo.
• Remover restrições de zoom não quebra layouts quando são seguidas práticas de design responsivo. CSS moderno e layouts flexíveis adaptam-se naturalmente ao zoom.
• Esta regra verifica que user-scalable="no" não está presente no elemento <meta name="viewport">, e que maximum-scale não é inferior a 5 (500%).

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Understanding Success Criterion 1.4.4: Resize Text

→