Zoom e deslocamento em dispositivos móveis

A Silktide verifica se as suas páginas funcionam em ecrãs pequenos sem obrigar os visitantes a ampliar e a arrastar a página em duas direções para a ler. As páginas que falham nesta verificação normalmente não foram concebidas para dispositivos móveis.

Porque é importante

Ler uma página concebida apenas para computadores num telemóvel significa ampliar com o gesto de pinça uma coluna de texto e, depois, deslocar-se tanto na horizontal como na vertical para cada linha — algo penoso para qualquer pessoa e impossível para muitas pessoas com baixa visão ou limitações motoras. Atualmente, os dispositivos móveis representam a maior parte do tráfego da Web, por isso uma página assim falha para a maioria dos seus visitantes, além de obter uma classificação inferior nos motores de pesquisa. O critério de sucesso 1.4.10 da WCAG (Refluxo, nível AA da WCAG) exige que o conteúdo se reorganize para um ecrã com 320 píxeis de largura sem deslocamento bidimensional.

Como corrigir

1. Utilize um design Web responsivo, para que a página se reorganize numa única coluna em ecrãs estreitos. O layout moderno de CSS (media queries, flexbox, grid) tornou esta uma prática padrão; a maioria dos temas de sites oferece suporte imediato.
2. Inclua uma etiqueta viewport correta no modelo da sua página:

<!-- Indica aos navegadores móveis que devem renderizar à largura do dispositivo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Teste a página com 320 píxeis de largura (a menor largura comum de telemóveis) e verifique se nada força o deslocamento horizontal — tabelas largas, imagens com largura fixa e sequências longas sem possibilidade de quebra são causas frequentes.

Se não for possível tornar uma página responsiva na prática, pode aprovar o resultado.

Como a Silktide testa isto

1. Carrega a página como um dispositivo móvel.
2. Avalia se a página parece ter sido concebida para dispositivos móveis. Uma página falha quando qualquer uma destas condições se verifica:
   • Não tem uma etiqueta viewport utilizável ou a viewport declara uma largura fixa superior a 480 píxeis.
   • Mais de 35% do texto é renderizado demasiado pequeno para ser lido (menos de 10 píxeis).
   • Desloca-se horizontalmente mais de 40% da largura do ecrã.
   • O navegador tem de reduzir o zoom para menos de 60% para ajustar a página ao ecrã.
3. Comunica a página quando esta falha, uma vez por página.

Resolução de problemas

A verificação relacionada do deslocamento horizontal

A verificação Deslocamento horizontal em dispositivos móveis identifica quantidades menores de conteúdo que excede horizontalmente os limites em páginas que, de resto, são compatíveis com dispositivos móveis. Esta verificação deteta o caso extremo em que a página não tenta sequer oferecer suporte para dispositivos móveis; por isso, a solução é uma reformulação responsiva, e não o ajuste de um único elemento que excede os limites.

Algumas partes da minha página precisam genuinamente de um layout bidimensional

A WCAG permite exceções para conteúdos que precisam de um layout bidimensional para serem utilizáveis, como mapas, tabelas de dados e diagramas. A página à volta desses elementos deve continuar a reorganizar-se; se uma página assinalada for uma dessas exceções, aprove o resultado.

Saiba mais

• Compreender o Critério de Sucesso 1.4.10: Refluxo (WCAG 2.1)
• Porque é que a Silktide testa com um iPhone 5?
• Deslocamento horizontal em dispositivos móveis
• Concebido para dispositivos móveis