Garantindo acessibilidade com ferramentas de desenvolvedor

Concluído

Testar sua página da Web em vários clientes e visualizações é tão importante quanto testá-la 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, existem ferramentas que você pode usar como desenvolvedor para avaliar a acessibilidade da sua página.

Verificadores de contraste

Alguém que é daltónico pode não ser capaz de diferenciar entre cores, ou pode ter dificuldade em trabalhar com cores que são semelhantes entre si. O World Wide Web Consortium (W3C), a organização de padrões para a web, estabeleceu um sistema de classificação para o contraste de cores.

Escolher as cores certas para garantir que sua página seja acessível a todos pode ser complicado de fazer manualmente. Você pode usar as seguintes ferramentas para gerar cores apropriadas e testar seu site para garantir a conformidade:

Farol

Lighthouse é uma ferramenta que o Google criou para analisar sites. Tornou-se tão popular que está incluído nas ferramentas de desenvolvimento de muitos navegadores. O Lighthouse pode examinar a otimização do mecanismo de pesquisa (SEO) de uma página, o desempenho de carga e outras práticas recomendadas. Lighthouse também pode analisar uma página e fornecer uma pontuação para a sua acessibilidade atual.

Nota

Como em qualquer ferramenta automatizada, você não pode confiar na pontuação que o Lighthouse fornece como a única indicação da acessibilidade de uma página. Mas constitui um bom ponto de partida para identificar e remediar problemas.

Exercício: gerar a pontuação de acessibilidade do Farol de uma página

Teste o Lighthouse no seu navegador. As capturas de ecrã seguintes utilizam o Edge, mas pode seguir os mesmos passos no Chrome e em muitos outros navegadores.

  1. Abra o navegador e vá para a página principal da Microsoft.

  2. Selecione a tecla F12 para abrir as ferramentas de desenvolvedor.

  3. Na parte superior, selecione o ícone de divisa (>>) para abrir a lista de guias ocultas.

    Captura de tela das ferramentas de desenvolvedor com a divisa realçada.

  4. Selecione Farol na lista.

  5. Em Categorias, desmarque todos os itens, exceto Acessibilidade.

  6. Em Dispositivo, selecione Área de trabalho.

    Captura de ecrã do Lighthouse com apenas Acessibilidade selecionada nas Categorias e Ambiente de Trabalho selecionado para Dispositivo.

  7. Selecione Gerar relatório.

  8. Observe a pontuação e as informações associadas sobre a página.

  9. Você pode testar outras páginas selecionando Limpar tudo no Lighthouse, indo para uma página diferente e, em seguida, selecionando Gerar relatório.

    Captura de ecrã da secção URL do Lighthouse, com o botão para limpar todos os itens realçado.

Agora você viu como usar o Lighthouse, juntamente com as informações de acessibilidade que a ferramenta pode fornecer.