Verifique se o esquema da página Web é utilizável quando é estreito

Uma parte importante da acessibilidade é certificar-se de que o seu site funciona bem numa viewport estreita. Muitos utilizadores precisam de ampliar a página para poder utilizá-la, o que significa que não resta muito espaço.

Quando não há espaço suficiente, o esquema de várias colunas deve transformar-se num esquema de coluna única, com conteúdo colocado numa ordem compreensível. Isto significa colocar o conteúdo mais importante na parte superior da página e colocar conteúdos adicionais mais abaixo na página.

Testar as viewports estreitas ao redimensionar a janela do browser

1. Abra a página Web de demonstração de teste de acessibilidade numa nova janela ou separador.

2. Clique com o botão direito do rato em qualquer parte da página Web e, em seguida, selecione Inspecionar. Em alternativa, prima F12. O DevTools é aberto junto à página Web:

   

3. Torne a janela do browser mais estreita ao arrastar o separador entre a página Web e as DevTools para a esquerda.

   A página Web composta reorganiza o esquema para se ajustar à porta de visualização estreita:

   

4. Utilize as teclas de seta para se deslocar para baixo na página e avaliar a acessibilidade do conteúdo.

   O esquema de duas colunas é agora um esquema de coluna única. No entanto, a barra de navegação superior ocupa muito espaço vertical, o que dificulta a leitura dos conteúdos. O formulário de pesquisa também é difícil de utilizar, porque é demasiado estreito:

   

Device Emulation tool to test narrow viewports (Ferramenta de Emulação de Dispositivos para testar as viewports estreitas)

Pode simular uma viewport estreita ao redimensionar a janela do browser, mas uma forma melhor de testar a capacidade de resposta da sua estrutura é utilizar a ferramenta de Emulação do Dispositivo . Seguem-se algumas funcionalidades da ferramenta Deulação de Dispositivos que o ajudam a encontrar problemas de acessibilidade de qualquer site:

• Sem redimensionar a janela do browser, redimensione a página e teste se as consultas de multimédia CSS acionam uma alteração no esquema.

• Verifique se existem dependências que utilizam um rato. Por predefinição, a Emulação do Dispositivo assume um dispositivo tátil. Isto significa que qualquer funcionalidade do seu produto que dependa da interação ao pairar não funcionará.

• Efetue testes visuais ao simular diferentes dispositivos, níveis de zoom e proporções de píxeis.

• Teste o comportamento do produto em ligações não fiáveis ou quando o utilizador está offline. Mostrar as interações mais importantes para um utilizador numa ligação lenta também é uma consideração de acessibilidade.

Para saber mais sobre a ferramenta de Emulação de Dispositivos , veja Emular dispositivos móveis (Emulação de Dispositivos).