Rolagem horizontal em dispositivos móveis

A Silktide verifica se as suas páginas rolam horizontalmente em telemóveis. O conteúdo ​​deve caber na largura de um ecrã pequeno, para que os visitantes só precisem de rolar para baixo.

Por que isso é importante

Quando uma página é mais larga do que o ecrã, parte de cada linha de texto fica fora da área visível, e o leitor precisa arrastar para a frente e para trás para acompanhar o conteúdo. Isso é cansativo para qualquer pessoa e representa uma barreira real para pessoas com baixa visão (que muitas vezes também ampliam a página) e pessoas com limitações motoras. O critério de sucesso 1.4.10 da WCAG (Refluxo, nível AA da WCAG) exige que o conteúdo caiba num ecrã com 320 píxeis de largura sem rolagem em duas dimensões.

Normalmente, a página como um todo está correta e um único elemento está a causar o excesso de largura — uma tabela larga, uma imagem com largura fixa, um vídeo incorporado ou uma sequência longa sem possibilidade de quebra, como um URL.

Como corrigir

1. Abra a página num telemóvel (ou reduza a janela do navegador para 320 píxeis) e encontre o que ultrapassa a margem direita.
2. Corrija o elemento problemático com CSS responsivo:

/* O elemento com largura fixa torna a página mais larga do que o ecrã */
img.hero { width: 600px; }

/* Corrigido: reduz-se para caber em ecrãs estreitos */
img.hero { max-width: 100%; height: auto; }

3. Para tabelas de dados largas, permita que a tabela role dentro do seu próprio contentor (overflow-x: auto), para que o resto da página continue a caber no ecrã.
4. É permitido que conteúdos que realmente precisam de um esquema bidimensional, como mapas e diagramas, tenham rolagem — se isso for tudo o que a verificação indicar, pode aprová-la.

Como a Silktide faz a verificação

1. Carrega a página como um dispositivo móvel.
2. Mede até que ponto a página se estende para além da margem direita do ecrã. Um excesso de largura inferior a 10 píxeis é ignorado como erro de arredondamento.
3. Classifica o excesso de largura de acordo com o número de dispositivos que afeta, desde um ligeiro excesso que afeta apenas telemóveis pequenos (com 320 píxeis de largura, como um iPhone 5) até um excesso suficientemente grande para afetar telemóveis grandes (com 414 píxeis de largura, como um iPhone 7 Plus).

Resolução de problemas

A verificação relacionada com o design para dispositivos móveis

Esta verificação indica excesso de largura horizontal em páginas que, de resto, são compatíveis com dispositivos móveis. As páginas que não tentam oferecer suporte para dispositivos móveis — sem viewport, texto minúsculo, excesso extremo de largura — são indicadas por Zoom e rolagem em dispositivos móveis, em vez disso, e a correção consiste numa reformulação responsiva.

Não consigo ver nenhuma rolagem

Pequenos excessos de largura podem ser invisíveis em telemóveis maiores. Teste com 320 píxeis de largura — as ferramentas de desenvolvimento do navegador permitem definir a largura exata — e procure algo que ultrapasse a margem direita.

Saiba mais

• Compreender o critério de sucesso 1.4.10: Refluxo (WCAG 2.1)
• Por que a Silktide faz verificações com um iPhone 5?
• Zoom e rolagem em dispositivos móveis
• Concebido para dispositivos móveis