Verifique se o layout da página da Web é acessível quando restrito

Uma parte importante da acessibilidade é garantir que seu site funcione bem em uma janela de visualização estreita. Muitos usuários precisam ampliar a página para poder usá-la, e isso significa que não há muito espaço sobrando.

Quando não houver espaço suficiente, o layout de várias colunas deve se transformar em um layout de coluna única, com o conteúdo colocado em uma ordem compreensível. Isso significa colocar o conteúdo mais importante na parte superior da página e colocar o conteúdo adicional mais abaixo na página.

Teste visores estreitos redimensionando a janela do navegador

1. Abra a página da Web de demonstração do teste de acessibilidade em uma nova janela ou guia.

2. Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web:

   

3. Torne a janela do navegador mais estreita arrastando o separador entre a página da Web e o DevTools para a esquerda.

   A página da Web renderizada reorganiza seu layout para se ajustar à janela de visualização estreita:

   

4. Use as teclas de direção para rolar a página para baixo e avaliar a acessibilidade do conteúdo.

   O layout de duas colunas agora é um layout de coluna única. Mas a barra de navegação superior ocupa muito espaço vertical, o que dificulta a leitura do conteúdo. O formulário de pesquisa também é difícil de usar, porque é muito restrito:

   

Ferramenta de emulação de dispositivo para testar visores estreitos

Você pode simular um visor estreito redimensionando a janela do navegador, mas a melhor maneira de testar a capacidade de resposta do seu design é usar a ferramenta Emulação de dispositivo . Aqui estão alguns recursos da ferramenta de Emulação de Dispositivo que ajudam você a encontrar problemas de acessibilidade de qualquer site:

• Sem redimensionar a janela do navegador, redimensione a página e teste se as consultas de mídia CSS disparam uma alteração no layout.

• Verifique se há dependências que usam um mouse. Por padrão, a Emulação de Dispositivo pressupõe um dispositivo sensível ao toque. Isso significa que qualquer funcionalidade do seu produto que dependa da interação do mouse não funcionará.

• Faça testes visuais simulando diferentes dispositivos, níveis de zoom e taxas de proporção de pixels.

• Teste como seu produto se comporta em conexões não confiáveis ou quando o usuário está offline. Mostrar as interações mais importantes para um usuário em uma conexão lenta também é uma consideração de acessibilidade.

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