Sobre esta regra de acessibilidade
O elemento <meta name="viewport"> controla como uma página é apresentada em dispositivos móveis, incluindo as suas dimensões e escala. Dois parâmetros dentro do seu atributo content podem restringir o zoom:
-
user-scalable="no"— Desativa completamente o pinch-to-zoom e outros tipos de dimensionamento iniciados pelo utilizador na página. -
maximum-scaledefinido abaixo de 2 — Limita o quanto um utilizador pode fazer zoom, impedindo-o de atingir o nível de zoom de 200% exigido pelas WCAG.
Ambas estas restrições criam barreiras sérias para pessoas com baixa visão. Muitos utilizadores dependem do zoom para aumentar o texto e elementos de interface para um tamanho legível. Quando o zoom está desativado ou limitado, estes utilizadores podem ser incapazes de usar a página completamente. As ferramentas de ampliação de ecrã e o zoom nativo do navegador são estratégias de assistência fundamentais, e restringi-las prejudica a acessibilidade de toda a página.
Esta regra relaciona-se com o Critério de Sucesso 1.4.4 das WCAG 2.0/2.1/2.2: Redimensionar texto (Nível AA), que exige que o texto possa ser redimensionado até 200% sem perda de conteúdo ou funcionalidade. Ao bloquear o zoom abaixo desse limite, você falha este critério. Este critério de sucesso existe porque a capacidade de ampliar conteúdo é uma das funcionalidades de acessibilidade mais básicas e amplamente utilizadas em todas as plataformas.
Como corrigir
-
Remova
user-scalable="no"do atributocontentdo seu elemento<meta name="viewport">. Se estiver presente, elimine-o ou defina-o comouser-scalable="yes". -
Remova ou aumente
maximum-scale. Se usarmaximum-scale, defina-o para pelo menos2(que permite zoom de 200%). Melhor ainda, remova-o completamente para permitir zoom irrestrito. - Teste em dispositivos móveis após fazer as alterações. Verifique que o pinch-to-zoom funciona e que o conteúdo permanece utilizável quando ampliado para 200%.
Exemplos
Incorreto: O zoom está completamente desativado
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
O parâmetro user-scalable=no impede os utilizadores de fazer zoom completamente.
Incorreto: A escala máxima é demasiado restritiva
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5">
Definir maximum-scale para 1.5 limita o zoom a 150%, que está abaixo do limite necessário de 200%.
Correto: O zoom é totalmente permitido
<meta name="viewport" content="width=device-width, initial-scale=1">
Ao omitir tanto user-scalable como maximum-scale, o comportamento padrão de zoom do navegador é preservado e os utilizadores podem fazer zoom livremente.
Correto: Permitindo explicitamente zoom com uma escala máxima suficiente
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, maximum-scale=5">
Aqui, user-scalable=yes permite explicitamente o zoom, e maximum-scale=5 permite até 500% de zoom, bem acima do mínimo de 200%.
Correto: Definindo maximum-scale para exatamente 2
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
Um maximum-scale de 2 permite zoom de 200%, cumprindo o requisito mínimo das WCAG. Permitir valores mais altos é ainda melhor, mas 2 é o valor mínimo aceitável.
O que esta regra verifica
A regra axe meta-viewport inspeciona o elemento <meta name="viewport"> no <head> do seu documento e verifica duas coisas:
-
O parâmetro
user-scalablenão está definido comono(ou0). -
O parâmetro
maximum-scale, se presente, não é inferior a2.
Se alguma das condições for violada, a regra sinaliza a página como tendo uma restrição de zoom que pode impedir utilizadores com baixa visão de aceder ao conteúdo.
Ajude-nos a melhorar os nossos guias
Detecte problemas de acessibilidade automaticamente
O Rocket Validator examina milhares de páginas com Axe Core e o W3C Validator, encontrando problemas de acessibilidade em todo o seu site.