Garantir a acessibilidade com ferramentas de desenvolvedor
Testar sua página da Web em vários clientes e exibições é tão importante quanto testar em vários navegadores. Esse teste pode não ser prático em todos os cenários e pode perder situações em que os usuários usam um navegador, mas podem ter outra deficiência. Felizmente, há ferramentas que você pode usar como desenvolvedor para medir a acessibilidade da sua página.
Verificadores de contraste
Alguém que seja daltônico pode não ser capaz de diferenciar as cores ou pode ter dificuldade para trabalhar com cores semelhantes uma da outra. O World Wide Web Consortium (W3C), a organização de padrões da Web, estabeleceu um sistema de classificação para contraste de cores.
Pode ser difícil escolher manualmente as cores certas para garantir que sua página seja acessível a todos. Você pode usar as seguintes ferramentas para gerar as cores apropriadas e testar seu site para garantir a conformidade:
- Ferramentas de geração de paleta:
- Adobe Color, uma ferramenta interativa para testar combinações de cores
- Color Safe, uma ferramenta para gerar cores de texto com base em uma cor da tela de fundo selecionada
- Verificadores de conformidade:
- Extensões de navegador para testar uma página:
- Aplicativos:
Lighthouse
O Lighthouse é uma ferramenta criada pelo Google para analisar sites. Ele se tornou tão popular que está incluído em muitas ferramentas de desenvolvedor de navegadores. O Lighthouse pode examinar a SEO (otimização do mecanismo de pesquisa) de uma página, o desempenho de carga e outras práticas recomendadas. O Lighthouse também pode analisar uma página e fornecer uma pontuação para sua acessibilidade atual.
Observação
Assim como acontece com qualquer ferramenta automatizada, você não pode contar com a pontuação que o Lighthouse fornece como a única indicação da acessibilidade de uma página. Mas ele fornece um bom ponto de partida para identificar e solucionar problemas.
Exercício: Gerar a pontuação de acessibilidade do Lighthouse de uma página
Teste o Lighthouse no seu navegador. As capturas de tela a seguir usam o Edge, mas você pode seguir as mesmas etapas no Chrome e em muitos outros navegadores.
Abra seu navegador e vá para a página da Web principal da Microsoft.
Selecione a tecla F12 para abrir as ferramentas de desenvolvedor.
Na parte superior, selecione o ícone de divisa (>>) para abrir a lista de guias ocultas.
Selecione Lighthouse na lista.
Em Categorias, desmarque todos os itens, exceto Acessibilidade.
Em Dispositivo, selecione Desktop.
Selecione Gerar relatório.
Observe a pontuação e as informações associadas sobre a página.
Você pode testar outras páginas selecionando Limpar tudo no Lighthouse, indo para uma página diferente e selecionando Gerar relatório.
Agora você viu como usar o Lighthouse, juntamente com as informações de acessibilidade que a ferramenta pode fornecer.