Have a voice in guiding the future of Google's developer brands. Share your thoughts in our survey.

Acessibilidade Referência

wf_published_on: 2018-07-13 #}

Esta página é uma referência abrangente de recursos de acessibilidade no Chrome DevTools. Destina-se a desenvolvedores web que:

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

Consulte Navegação no Chrome DevTools com tecnologia assistiva se estiver em busca de ajuda sobre DevTools de navegação com tecnologia assistiva, como leitura de tela.

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 tem acessibilidade, você precisa ter duas questões básicas em mente:

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

Em geral, o DevTools pode ajudá-lo a corrigir erros relacionados à pergunta nº 2, porque esses erros são fáceis de detectar de maneira automatizada. A questão nº 1 é igualmente importante, mas infelizmente o DevTools não pode ajudá-lo. A única maneira de encontrar erros relacionados à pergunta nº 1 é tentar usar uma página com um teclado ou leitor de tela por conta própria. Veja Como fazer uma revisão de acessibilidade para mais informações.

Auditar a acessibilidade de uma página

Em geral, use o painel de auditar para determinar se:

Para auditar uma página:

  1. Vá até a URL que você deseja auditar.

  2. No DevTools, clique na aba Audits. O DevTools mostra várias opções de configuração.

    Configuring audits.
    Figura 1. Configurando auditorias

  3. Em Device, selecione Mobile se você quiser simular um dispositivo móvel. Esta opção altera a string do seu agente de usuário e redimensiona a viewport. Se a versão móvel da página for exibida de maneira diferente da versão clássica, essa opção poderá ter um efeito significativo nos resultados de sua auditoria.

  4. Na seção Audits, verifique se Accessibility está habilitado. Desabilite as outras categorias se quiser excluí-las de seu relatório. Deixe-as habilitadas se você quiser descobrir outras maneiras de melhorar a qualidade da sua página.

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

  6. O parâmetro Clear Storage permite limpar todo o armazenamento, antes de carregar a página ou preservar o armazenamento entre os carregamentos de página. Esta opção também, provavelmente é irrelevante para a sua pontuação de acessibilidade, então você pode usar o que preferir.

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

    A report.
    Figura 2. Um relatório

  8. Clique na auditoria para entender melhor.

    More information about an audit.
    Figura 3. Mais informações sobre uma auditoria

  9. Clique em Learn More para ver a documentação da auditoria.

    Viewing an audit's documentation.
    Figura 4. Visualização da documentação de uma auditoria

Veja também: Extensão aXe

Você pode preferir usar a extensão aXe em vez do painel Audits. Eles geralmente fornecem as mesmas informações, já que aXe é o mecanismo subjacente que alimenta o Painel Audits. A extensão aXe tem uma UI diferente e descreve as auditorias de uma forma ligeiramente diferente. Uma vantagem que a extensão aXe tem sobre o painel de Audits é que ele permite inspecionar e destacar falhas node.

The aXe extension.
Figura 5. A extensão aXe

O painel Accessibility

O painel Accessibility é onde você pode visualizar a árvore de acessibilidade, os atributos ARIA e propriedades de acessibilidade computadas de nodes DOM.

Para abrir o painel Accessibility:

  1. Clique na aba Elements.
  2. Na árvore DOM, selecione o elemento que você deseja inspecionar.
  3. Clique na aba Accessibility. Esta aba pode estar escondida atrás do botão More
Tabs More Tabs.
Inspecting the h1 element of the DevTools homepage in the Accessibility
pane.
Figura 6. Inspeção do elemento h1 da homepage DevTools, no painel Accessibility

Visualizar a posição de um elemento em accessibility tree

Accessibility tree é um subconjunto da árvore DOM. Contém apenas elementos relevantes da árvore DOM, útil para exibir o conteúdo da página em um leitor de tela.

Inspecione a posição de um elemento em accessibility tree no painel Accessibility.

The Accessibility Tree section
Figura 7. A seção Accessibility Tree

Visualizar um elemento em ARIA attributes

ARIA attributes garante que os leitores de tela tenham todas as informações necessárias para representar adequadamente o conteúdo de uma página.

Visualize os atributos ARIA de um elemento no painel Accessibility.

The ARIA Attributes section
Figura 8. A seção ARIA Attributes

Visualizar elemento calculado em Computed Properties

Nota: Se você está procurando por propriedades CSS calculadas, veja Aba Calculada.

Algumas propriedades de acessibilidade são calculadas dinamicamente pelo navegador. Essas propriedades podem ser visualizadas na seção Computed Properties no painel Accessibility.

Visualize as propriedades de acessibilidade calculadas de um elemento no painel Accessibility.

The Computed (Accessibility) Properties section.
Figura 9. A seção Computed (Accessibility) Properties

Visualizar o contrast ratio de um elemento de texto no seletor de cores

Algumas pessoas com baixa visão não veem áreas com muito brilho ou muito escuro. Tudo tende a aparecer com o mesmo brilho, o que dificulta a distinção entre contornos e bordas. Contrast ratio(taxa de contraste) mede a diferença de brilho entre texto e plano de fundo. Se seu texto tiver um baixo contrast ratio, então esses usuários de baixa visão podem literalmente experimentar seu site como uma tela em branco.

O seletor de cores pode ajudá-lo a garantir que o texto atenda à contrast ratio recomendada em etapas:

  1. Clique na aba Elements.

  2. Na árvore DOM, selecione o elemento com o texto que você deseja inspecionar.

    Inspecting a paragraph in the DOM Tree.
    Figura 10. Inspeção de um parágrafo no DOM Tree

  3. No painel Styles, clique no quadrado com a cor do elemento, depois no valor da cor do elemento.

    The color property of the element.
    Figura 11. A propriedade color do elemento

  4. Verifique a seção Contrast Ratio no seletor de cores. Um sinal de aprovação significa que o elemento tem o mínimo recomendado. Ter dois sinais de aprovação significa que está dentro do melhor recomendado.

    The Contrast Ratio section of the Color Picker shows 2 checkmarks and a
              value of 16.10.
    Figura 12. A seção Contrast Ratio do Seletor de cor (Color Picker) exibe 2 marcas de seleção e um valor de 16.10

  5. Clique na seção Contrast Ratio para ver mais informações. Uma linha aparece no seletor visual(visual picker) no topo do seletor de cores. Se a cor atual atende às recomendações, qualquer coisa que estiver no mesmo lado da linha atenderá às recomendações. Se a cor atual não não atende às recomendações, então qualquer coisa no mesmo lado também não atenderá às recomendações.

    The Contrast Ratio Line in the visual picker.
    Figura 13. A Contrast Ratio Line no seletor visual

Comentários

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.