Esta página é uma referência abrangente dos recursos de acessibilidade nas Ferramentas do desenvolvedor do Chrome. Ele é destinado a desenvolvedores da Web que:
- Ter um conhecimento básico do DevTools, como como abri-lo.
- Conhecer os princípios e as práticas recomendadas de acessibilidade.
O objetivo desta 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 Navegar no Chrome DevTools com tecnologia assistiva se você precisar de ajuda para navegar no DevTools com uma tecnologia assistiva, como um leitor de tela.
Consulte Aprenda sobre acessibilidade se quiser saber como desenvolver sites acessíveis.
Visão geral dos recursos de acessibilidade nas Ferramentas do desenvolvedor do Chrome
Esta seção explica como as DevTools se encaixam no seu kit de ferramentas de acessibilidade.
Ao determinar se uma página é acessível, você precisa considerar duas perguntas gerais:
- Posso navegar pela página com um teclado ou um leitor de tela?
- Os elementos da página estão marcados corretamente para leitores de tela?
Em geral, o DevTools pode ajudar a corrigir erros relacionados à pergunta 2, porque eles são fáceis de detectar de forma automatizada. A pergunta 1 é tão importante quanto a 2, 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 avaliação 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 é marcada corretamente para leitores de tela.
- Os elementos de texto em uma página têm taxas de contraste suficientes. Consulte também Como deixar seu site mais legível.
Para auditar uma página:
- Acesse o URL que você quer auditar.
Nas Ferramentas do desenvolvedor, clique no painel Lighthouse. As ferramentas de desenvolvimento mostram várias opções de configuração.
Em Dispositivo, selecione Dispositivo móvel se quiser simular um dispositivo móvel. Essa opção muda de forma diferente a string do user agent e redimensiona a viewport. 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á ter um efeito significativo nos resultados da auditoria.
Na seção Lighthouse, verifique se a opção Acessibilidade está ativada. Desative as outras categorias se quiser excluí-las do relatório. Deixe-as ativadas se quiser descobrir outras maneiras de melhorar a qualidade da sua página.
A seção Limitação permite limitar a rede e a CPU, o que é útil ao analisar a performance de carga. Essa opção não é relevante para sua pontuação de acessibilidade. Use a que preferir.
A caixa de seleção Clear Storage 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. Portanto, use a que preferir.
Clique em Gerar relatório. Após 10 a 30 segundos, o DevTools vai gerar um relatório. O relatório oferece várias dicas de como melhorar a acessibilidade da página.
Clique em uma auditoria para saber mais sobre ela.
Clique em Saiba mais para acessar a documentação da auditoria.
Consulte também: extensão aXe
Talvez seja melhor usar a extensão aXe ou a extensão do Lighthouse em vez do painel Lighthouse disponível por padrão no Chrome. Geralmente, eles fornecem as mesmas informações, já que o aXe é o mecanismo que alimenta o painel do Lighthouse. A extensão aXe tem uma interface diferente e descreve as auditorias de maneira um pouco diferente.
Uma vantagem que a extensão aXe tem em relação ao painel Audits é que ela permite inspecionar e destacar nós com falhas.
Testar o reflow de conteúdo com a barra de ferramentas do dispositivo
O critério de reflow das Diretrizes de Acessibilidade para Conteúdo Web (WCAG) recomenda que o conteúdo da Web permaneça visível sem perda de informações, mesmo quando a viewport é redimensionada ou muda de orientação. Ao alinhar o conteúdo em uma única coluna, os usuários que usam texto ampliado são suportados. Para testar como o conteúdo é redimensionado, redimensione a viewport dinamicamente com a Barra de ferramentas do dispositivo no painel Lighthouse.
Para redimensionar a janela de visualização, arraste as alças para as dimensões necessárias. Para saber quais dimensões específicas testar, consulte o critério de sucesso de reflow do WCAG.
Guia "Acessibilidade"
Na guia "Acessibilidade", é possível conferir a árvore de acessibilidade, os atributos ARIA e as propriedades de acessibilidade calculadas dos nós DOM.
Para abrir a guia Acessibilidade:
- Clique no painel Elementos.
- Na árvore DOM, selecione o elemento que você quer inspecionar.
- Clique na guia Acessibilidade. Essa guia pode estar oculta atrás do botão Mais guias keyboard_double_arrow_right .
Arraste a guia Acessibilidade para a frente para acessar mais rapidamente no futuro.
Conferir a posição de um elemento na árvore de acessibilidade
A árvore de acessibilidade é um subconjunto da árvore DOM. Ele contém apenas elementos da árvore DOM que são relevantes e úteis para mostrar o conteúdo da página em um leitor de tela.
Inspecione a posição de um elemento na árvore de acessibilidade na guia Acessibilidade.
Essa visualização permite que você explore apenas um nó e seus ancestrais. Para conferir toda a árvore de acessibilidade, siga as etapas abaixo.
(Pré-lançamento) Conheça a árvore de acessibilidade de página inteira
A visualização em tela cheia da árvore de acessibilidade permite que você explore toda a árvore e entenda melhor como seu conteúdo da Web é exposto à tecnologia adaptativa.
Para conferir a árvore de acessibilidade:
- Marque ciência Ativar árvore de acessibilidade de página inteira.
Na barra de ação na parte de cima, clique em Reload DevTools.
No canto superior direito do painel Elements, ative o botão accessibility_new Switch to Accessibility Tree view.
Navegue pela árvore de acessibilidade. É possível abrir nós ou clicar para conferir detalhes em Propriedades computadas.
Selecione um nó e clique no botão accessibility_new Switch to DOM tree view para voltar à árvore do DOM.
O nó DOM correspondente é selecionado agora. Essa é uma ótima maneira de entender o mapeamento entre o nó DOM e o nó da árvore de acessibilidade.
Conferir 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.
Confira os atributos ARIA de um elemento na guia "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 fonte. Isso pode confundir os usuários que dependem de tecnologias adaptativas para navegar na Web.
Para conferir e depurar a ordem da origem no seu site:
- Inspecione um elemento na página.
- Em Elementos > Acessibilidade > Visualizador de ordem da fonte, marque check_box Mostrar ordem da fonte.
Na viewport, as Ferramentas do desenvolvedor descrevem elementos aninhados com bordas e os marcam com números correspondentes à ordem de origem.
Conferir 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 da guia Acessibilidade.
Confira as propriedades de acessibilidade computadas de um elemento na guia "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 Como tornar seu site mais legível para saber mais.