Referência de recursos de acessibilidade

Kayce Basques

Sofia Emelianova

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

• Ter uma compreensão básica do DevTools, como abrir a ferramenta.
• Conheça 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 adaptativa se precisar de ajuda para navegar no DevTools com uma tecnologia adaptativa, como um leitor de tela.

Acesse Aprenda sobre acessibilidade se quiser saber 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 está acessível, você precisa ter duas perguntas gerais em mente:

1. Posso navegar pela página com um teclado ou um leitor de tela?
2. 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 nº 1 é tão importante quanto, mas infelizmente o DevTools não pode ajudar nesse caso. 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 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 no painel Lighthouse. As DevTools mostram várias opções de configuração.

   

3. Em Dispositivo, selecione Dispositivo móvel se quiser simular um dispositivo móvel. Essa opção muda 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á ter um efeito significativo nos resultados da sua 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-as ativadas se quiser descobrir outras maneiras 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 de carga. Essa opção não deve afetar sua pontuação de acessibilidade. Portanto, use 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 também é irrelevante para sua pontuação de acessibilidade, então você pode usar o que preferir.

7. Clique em Gerar relatório. Após 10 a 30 segundos, o DevTools fornece um relatório. O relatório oferece várias dicas sobre como melhorar a acessibilidade da página.

   

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

   

9. Clique em Saiba mais para conferir a documentação dessa auditoria.

   

Consulte também: extensão aXe

Você pode preferir usar a extensão aXe ou a extensão Lighthouse em vez do painel Lighthouse, que está disponível por padrão no Chrome. Em geral, eles fornecem as mesmas informações, já que o aXe é o mecanismo que alimenta o painel Lighthouse. A extensão aXe tem uma interface diferente e descreve as auditorias de maneira um pouco diferente.

Uma vantagem da extensão aXe em relação ao painel Auditorias é que ela permite inspecionar e destacar nós com falha.

Testar o refluxo de conteúdo com a barra de ferramentas do dispositivo

O critério de ajuste de texto 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 janela de visualização é redimensionada ou muda de orientação. Ao alinhar o conteúdo a uma única coluna, os usuários que usam texto ampliado são atendidos. Para testar como o conteúdo é reformatado, redimensione a janela de visualização dinamicamente com a barra de ferramentas do dispositivo no painel Lighthouse.

Para redimensionar a janela de visualização, arraste as alças até as dimensões necessárias. Para conferir as dimensões específicas a serem testadas, consulte o critério de sucesso de refluxo das WCAG.

A 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:

1. Clique no painel Elementos.
2. Na Árvore DOM, selecione o elemento que você quer inspecionar.
3. 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 facilitar o acesso no futuro.

Ver 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 do DOM que são relevantes e úteis para mostrar o conteúdo da página em um leitor de tela.

Para inspecionar a posição de um elemento na árvore de acessibilidade na guia Acessibilidade, ative a opção Mostrar árvore de acessibilidade.

Essa alternância substitui a árvore do DOM no painel Elementos por uma árvore de acessibilidade de página inteira. Essa árvore ajuda você a entender melhor como seu conteúdo da Web é exposto à tecnologia adaptativa.

Para navegar pela árvore de acessibilidade, expanda e selecione os nós para conferir os detalhes em Propriedades calculadas.

A qualquer momento, você pode voltar para a árvore do DOM. O nó DOM correspondente permanece selecionado. Essa é uma ótima maneira de entender o mapeamento entre o nó do DOM e o nó da árvore de acessibilidade.

Ver 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.

Ver 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 tecnologia adaptativa para navegar na Web.

Para ver e depurar a ordem das fontes no seu site:

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

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

Ver 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 calculadas da guia Acessibilidade.

Confira as propriedades de acessibilidade calculadas de um elemento na guia "Acessibilidade".

A guia "Renderização"

Use a guia Renderização para emular determinados recursos de mídia CSS sem especificá-los manualmente no código ou no ambiente de teste. Esses recursos de mídia mudam a aparência da sua página da Web com base nas preferências do dispositivo do usuário. Para testar a acessibilidade visual da sua página, abra a guia Renderização e confira as seguintes opções:

• Emule deficiências visuais para ver sua página com várias deficiências visuais simuladas diferentes.
• Emule o recurso de mídia CSS prefers-color-scheme para ver como sua página aparece com o modo escuro ou claro ativado. Muitas pessoas pensam no modo escuro como uma escolha estética, mas o modo escuro como uma ferramenta de acessibilidade mostra que ele é útil de outras formas.
• Emule o tipo de mídia CSS para ver sua página em um estilo de mídia de impressão ou tela.
• Emule o recurso de mídia CSS forced-colors para ver como sua página aparece se o user agent ativar um modo de cores forçadas.
• Emule o recurso de mídia CSS prefers-contrast para ver seu conteúdo da Web com um valor de contraste maior, menor ou específico.
• Emule o recurso de mídia CSS prefers-reduced-motion para ver seu conteúdo da Web com movimento reduzido. Alguns usuários sentem distração ou náuseas com conteúdo animado. Use essa opção para ver como sua página aparece sem animações ou recursos como rolagem suave.
• Emule o recurso de mídia CSS prefers-reduced-transparency para ver como seu conteúdo da Web aparece se o usuário solicitar a redução dos efeitos de camada transparente ou translúcida usados no dispositivo.

Descobrir e corrigir textos de baixo contraste

O DevTools pode encontrar automaticamente problemas de baixo contraste e sugerir cores melhores para ajudar você a corrigir esses problemas. Consulte Tornar seu site mais legível para saber mais.