Acessibilidade de Referência

Esta página é uma referência abrangente de funcionalidades de acessibilidade no Chrome DevTools.Ele é destinado a desenvolvedores web que:

• Ter um entendimento básico de DevTools, como para abri-lo.
• estão familiarizados com os princípios de acessibilidade e as melhores práticas.

o objectivo desta referência é ajudá-lo a descobrir todas as ferramentas disponíveis inDevTools que o podem ajudar a examinar a acessibilidade de uma página.

See Navigating Chrome DevTools With Assistive Technology If you’re looking for help on navigating DevTools with an assisttive technology like a screen reader.

Visão Geral das funcionalidades de acessibilidade no DevTools Chrome

esta secção explica como o DevTools se encaixa na sua caixa geral de ferramentas de acessibilidade.

ao determinar se uma página está acessível, você precisa ter 2 perguntas gerais em mente:

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

em geral, DevTools pode ajudá-lo a corrigir erros relacionados com a pergunta #2, porque estes erros são fáceis de detectar de uma forma automatizada. A pergunta nº1 é igualmente importante, mas infelizmente o Devtoolscanão pode ajudá-lo. A única maneira de encontrar erros relacionados com a Pergunta #1 é tentar usar um pagewith um teclado ou leitor de tela você mesmo. Veja como fazer uma revisão de acessibilidade para saber mais.

Auditoria de uma página de acessibilidade

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

• Uma página está devidamente marcado para leitores de tela.
• os elementos de texto de uma página têm razões de contraste suficientes. Veja também a relação do contraste de um elemento de texto na escolha de cores.

para auditar uma página:

1. vá ao URL que deseja auditar.

2. em DevTools, clique na página auditorias. O DevTools mostra-lhe várias opções de configuração.

   

3. para o dispositivo, selecione Mobile se você quiser simular um dispositivo móvel. Esta opção muda de forma diferente o texto do seu agente de utilizador e muda o tamanho da janela. Se a versão móvel do pagedisslays diferentemente da versão desktop, Esta opção pode ter um efeito significativo nos resultados da sua auditoria.

4. na seção de auditorias, certifique-se de que a acessibilidade está ativada. Desactiva as outras categorias se as quiser excluir do seu relatório. Deixe-os ativados se você quiser descobrir outras maneiras de melhorar a qualidade de sua página.

5. a secção de estrangulamento permite-lhe acelerar a rede e a CPU, o que é útil ao analisar o desempenho da carga. Esta opção deve ser irrelevante para a sua pontuação de acessibilidade, para que possa utilizar o que preferir.

6. a opção Limpar o armazenamento permite-lhe limpar todo o armazenamento antes de carregar a página, ou preservestorage entre as cargas da página. Esta opção também é provavelmente irrelevante para a sua pontuação de acessibilidade, então você pode usar o que você preferir.

7. Clique Em Executar Auditorias. Após 10 a 30 segundos, a DevTools fornece um relatório.O seu relatório dá-lhe várias dicas sobre como melhorar a acessibilidade da página.

   

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

   

9. clique em saber mais para ver a documentação da auditoria.

   

Veja também: extensão aXe

você pode preferir usar a extensão aXe em vez do painel de auditorias.Eles geralmente fornecem a mesma informação, uma vez que aXe é o motor subjacente que alimenta o painel de auditoria. A extensão aXe tem uma IU diferente e descreve auditorias ligeiramente diferentes.Uma vantagem que a extensão aXe tem sobre o painel de auditorias é que ele permite inspecionar e iluminar nós falhando.

a área de acessibilidade

a área de acessibilidade é onde pode ver a árvore de acessibilidade, os atributos ARIA e as propriedades de acessibilidade computadas dos nós DOM.

para abrir a área de acessibilidade:

1. carregue na página Elementos.
2. na árvore DOM, seleccione o elemento que deseja inspeccionar.
3. carregue na página acessibilidade. Esta página pode estar escondida atrás do botão Mais Páginas.

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

A árvore de acessibilidade é um subconjunto de a árvore DOM. 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.

inspeccionar a posição de um elemento na árvore de acessibilidade a partir da área de acessibilidade.

ver os atributos ARIA de um elemento

Aria garante que os leitores de ecrã têm toda a informação de que necessitam para representar adequadamente o conteúdo de uma página.

ver os atributos ARIA de um elemento na área de acessibilidade.

ver as propriedades de acessibilidade computadas de um elemento

algumas propriedades de acessibilidade são calculadas dinamicamente pelo navegador. Estas propriedades podem ser vistas na seção de propriedades computadas da área de acessibilidade.

ver as propriedades de acessibilidade computadas de um elemento na área de acessibilidade.

ver a razão de contraste de um elemento de texto no selector de cores

algumas pessoas com visão baixa não vêem as áreas como muito brilhantes ou muito escuras. Tudo tende a aparecer com o mesmo brilho, o que torna difícil distinguir contornos e arestas.A razão de contraste mede a diferença de brilho entre o primeiro plano e o segundo plano do texto. Se o seu texto tem uma taxa de contraste baixa, então estes utilizadores de visão baixa podem literalmente experimentar o seu site como uma tela em branco.

o selector de cores pode ajudá-lo a garantir que o seu texto cumpre os ratiolevels de contraste recomendados:

1. carregue na página Elementos.

2. na árvore DOM, seleccione o elemento de texto que deseja inspeccionar.

   

3. na área de estilos, carregue no quadrado de cores ao lado do valor color do elemento.

   

4. assinale a secção de relação de contraste do extractor de cores. Uma marca de controlo significa que o elemento cumpre a recomendação mínima.Duas marcas de controlo significam que cumpre a recomendação reforçada.

   

5. clique na seção de relação de contraste para ver mais informações. Uma linha aparece no visualpicker no topo do Picker de cores. Se a cor atual atender às recomendações, então qualquer coisa do mesmo lado da linha também atende às recomendações. Se a cor atual não cumprir as recomendações, então qualquer coisa do mesmo lado também não cumpre as recomendações.

   

Feedback