Referência de recursos de acessibilidade

Esta página é uma referência abrangente dos recursos de acessibilidade no Chrome DevTools. Ela é destinada a desenvolvedores da Web que:

• Ter uma compreensão básica do DevTools, por exemplo, como abri-lo.
• Conhecer os princípios e práticas recomendadas de acessibilidade.

O objetivo dessa referência é ajudar você a descobrir todas as ferramentas disponíveis no DevTools que podem ajudar a examinar a acessibilidade de uma página.

Consulte Como navegar no Chrome DevTools com tecnologia adaptativa se estiver procurando ajuda para navegar com uma tecnologia adaptativa, como um leitor de tela.

Consulte Aprender sobre acessibilidade se você quiser aprender como desenvolver sites acessíveis.

Visão geral dos recursos de acessibilidade no Chrome DevTools

Esta seção explica como o DevTools se encaixa no seu kit de ferramentas de acessibilidade geral.

Ao determinar se uma página pode ser acessada, você precisa ter duas perguntas gerais em mente:

1. Posso navegar na página usando um teclado ou um leitor de tela?
2. Os elementos da página estão marcados corretamente para os leitores de tela?

Em geral, o DevTools pode ajudar a corrigir erros relacionados à pergunta 2, porque eles são fáceis de detectar de maneira automatizada. A pergunta 1 é igualmente importante, mas, infelizmente, o DevTools não pode ajudar você. A única maneira de encontrar erros relacionados à pergunta 1 é tentar usar uma página com um teclado ou leitor de tela. Consulte Como fazer uma análise de acessibilidade para saber mais.

Auditar a acessibilidade de uma página

Em geral, use as verificações de acessibilidade no painel Lighthouse para determinar se:

• Uma página está marcada corretamente para leitores de tela.
• Os elementos de texto em uma página têm taxas de contraste suficientes. Consulte também Tornar seu site mais legível.

Para auditar uma página:

1. Acesse o URL que você quer auditar.

2. No DevTools, clique na guia Lighthouse. O DevTools mostra diversas opções de configuração.

   

3. Em Dispositivo, selecione Mobile se quiser simular um dispositivo móvel. Essa opção muda de forma diferente a string do user agent e redimensiona a janela de visualização. Se a versão para dispositivos móveis da página for exibida de maneira diferente da versão para computador, essa opção poderá afetar significativamente os resultados da auditoria.

4. Na seção Lighthouse, verifique se a opção Acessibilidade está ativada. Desative as outras categorias se quiser excluí-las do relatório. Deixe-os ativados se quiser descobrir outras formas de melhorar a qualidade da sua página.

5. A seção Limitação permite limitar a rede e a CPU, o que é útil ao analisar o desempenho da carga. Essa opção precisa ser irrelevante para sua pontuação de acessibilidade. Assim, você pode usar o que preferir.

6. A caixa de seleção Limpar armazenamento permite limpar todo o armazenamento antes de carregar a página ou preservar o armazenamento entre os carregamentos de página. Essa opção provavelmente também é irrelevante para sua pontuação de acessibilidade, então você pode usar o que preferir.

7. Clique em Gerar relatório. Depois de 10 a 30 segundos, o DevTools fornece um relatório. Ele oferece várias dicas para melhorar a acessibilidade da página.

   

8. Clique em uma auditoria para saber mais sobre ela.

   

9. Clique em Saiba mais para ver a documentação da auditoria.

   

Consulte também: extensão aXe

É possível usar a extensão aXe ou a extensão Lighthouse em vez do painel do Lighthouse, que está disponível por padrão no Chrome. Geralmente, eles fornecem as mesmas informações, já que o aXe é o mecanismo subjacente que alimenta o painel do Lighthouse. A extensão aXe tem uma IU diferente e descreve as auditorias de maneira um pouco diferente.

Uma vantagem da extensão aXe sobre o painel "Auditorias" é que ela permite inspecionar e destacar os nós com falha.

Painel "Acessibilidade"

No painel "Acessibilidade", você pode ver a árvore de acessibilidade, os atributos ARIA e as propriedades de acessibilidade computadas dos nós DOM.

Para abrir o painel "Acessibilidade":

1. Clique na guia Elementos.
2. Na Árvore DOM, selecione o elemento que você quer inspecionar.
3. Clique na guia Acessibilidade. Essa guia pode estar oculta no botão Mais guias .

Visualizar a posição de um elemento na árvore de acessibilidade

A árvore de acessibilidade é um subconjunto da árvore do DOM. Ele contém apenas elementos da árvore DOM que são relevantes e úteis para exibir o conteúdo da página em um leitor de tela.

Inspecione a posição de um elemento na árvore de acessibilidade no painel Acessibilidade.

Com ela, é possível explorar apenas um único nó e os ancestrais dele. Para explorar toda a árvore de acessibilidade, siga as etapas abaixo.

(Prévia) Explorar a árvore de acessibilidade de página inteira

A visualização de página inteira da árvore de acessibilidade permite explorar toda a árvore e ajuda você a entender melhor como seu conteúdo da Web é exposto à tecnologia assistiva.

Para explorar a árvore de acessibilidade:

1. Marque a opção Ativar árvore de acessibilidade de página inteira.

2. Na barra de ações na parte de cima, clique em Reload DevTools.

   

3. No canto superior direito do painel Elementos, ative o botão Mudar para a visualização em árvore de acessibilidade.

   

4. Procure na árvore de acessibilidade. É possível expandir os nós ou clicar para conferir os detalhes em Propriedades computadas.

5. Selecione um nó e clique no botão Mudar para a visualização em árvore do DOM para voltar à árvore do DOM.

   O nó DOM correspondente está selecionado agora. Essa é uma ótima forma de entender o mapeamento entre o nó DOM e seu nó da árvore de acessibilidade.

Consultar os atributos ARIA de um elemento

Os atributos ARIA garantem que os leitores de tela tenham todas as informações necessárias para representar corretamente o conteúdo de uma página.

Veja os atributos ARIA de um elemento no painel Acessibilidade.

Conferir a ordem de origem dos elementos na tela

Os elementos na página nem sempre aparecem na ordem em que estão na origem. Isso pode confundir os usuários que dependem de tecnologia assistiva para navegar na Web.

Para visualizar e depurar a ordem de origem no seu site:

1. Inspecione um elemento na página.
2. Em Elementos > Acessibilidade > Visualizador de ordem de origem, marque Mostrar ordem de origem.

Na janela de visualização, o DevTools contorna elementos aninhados com bordas e os marca com números correspondentes à ordem de origem.

Visualizar as propriedades de acessibilidade computadas de um elemento

Algumas propriedades de acessibilidade são calculadas dinamicamente pelo navegador. Essas propriedades podem ser visualizadas na seção Propriedades computadas do painel Acessibilidade.

Veja as propriedades computadas de acessibilidade de um elemento no painel Acessibilidade.

Descobrir e corrigir textos de baixo contraste

O DevTools pode encontrar automaticamente problemas de baixo contraste e sugerir cores melhores para ajudar a corrigi-los. Consulte Tornar seu site mais legível para saber mais.