Acessibilidade

Por que bloquear o zoom por pinça exclui visitantes com baixa visão

Uma definição que alguns sites usam para parecer mais "limpa" pode tornar uma página completamente ilegível para quem precisa de ampliar.

O que é

Esta verificação analisa especificamente se a meta tag viewport de uma página inclui definições que desativam o zoom — mais comummente user-scalable=no ou maximum-scale=1, adicionadas à mesma tag que é normalmente necessária para a responsividade em dispositivos móveis. Estas adições eram por vezes usadas no passado para evitar que um duplo toque acidental ampliasse inesperadamente, mas têm um efeito colateral grave e não intencional: bloqueiam completamente o zoom, mesmo quando um visitante quer deliberadamente ampliar com dois dedos.

Isto é diferente de simplesmente não ter nenhuma tag viewport (o que causa um problema diferente, puramente visual, abordado nos nossos outros guias sobre o viewport) — aqui trata-se especificamente de uma tag viewport que está presente, mas foi configurada para impedir ativamente o zoom.

Por que importa

Muitos visitantes com baixa visão dependem do zoom por pinça como a sua forma habitual de ler qualquer conteúdo web confortavelmente, ajustando o nível de zoom ao que funciona para a sua própria visão numa determinada página. Bloquear essa capacidade não cria apenas um incómodo — para quem realmente precisa dela, pode tornar o conteúdo de uma página completamente ilegível, independentemente da qualidade do resto do design.

Isto é explicitamente referido na WCAG (as diretrizes padrão de acessibilidade web), que exigem que o zoom não seja desativado precisamente por causa do impacto direto que tem em pessoas com baixa visão — é considerado uma das falhas de acessibilidade mais graves e evitáveis, precisamente por retirar uma capacidade que o próprio navegador já fornece por predefinição.

Como corrigir

  1. Verifica a meta tag viewport da tua página à procura de user-scalable=no ou de um valor de maximum-scale igual ou inferior a 1.
  2. Remove essas partes específicas, se estiverem presentes, mantendo o resto da tag (width=device-width, initial-scale=1) intacto.
  3. Se o objetivo original era evitar um zoom acidental por duplo toque num elemento interativo específico, resolve isso com estilo direcionado apenas a esse elemento, em vez de desativar o zoom em toda a página.
  4. Se usares um criador de sites, isto raramente é definido por predefinição pela plataforma — verifica antes qualquer código personalizado que tenhas adicionado à secção <head> da página.
  5. Testa depois num telemóvel real, tentando ampliar a página com dois dedos, para confirmar que agora responde normalmente.

Veja se o seu próprio site tem este problema

O Launch Readiness analisa o seu site em busca deste e de mais ~50 problemas antes do lançamento, em segundos — grátis, sem registo.

Fazer uma análise grátis