Verifique o suporte ao leitor de tela e ao teclado na Árvore de Acessibilidade

Vários recursos do DevTools marcam o suporte ao teclado e ao leitor de tela. Usar a ferramenta Inspecionar para marcar a acessibilidade de cada elemento da página individualmente pode se tornar bastante demorado. Uma maneira alternativa de marcar uma página da Web é usar a Árvore de Acessibilidade. A Árvore de Acessibilidade indica quais informações a página fornece à tecnologia adaptativa, como leitores de tela.

A Árvore de Acessibilidade é um subconjunto da árvore DOM, que contém elementos da árvore DOM que são relevantes e úteis para exibir o conteúdo de uma página em um leitor de tela. A Árvore de Acessibilidade está na guia Acessibilidade da ferramenta Elementos (perto da guia Estilos ).

Para explorar usando a Árvore de Acessibilidade:

  1. Abra a página da Web de demonstração do teste de acessibilidade em uma nova janela ou guia.

  2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

  3. Selecione o botão Inspecionar (o ícone Inspecionar) no canto superior esquerdo do DevTools para que o botão seja realçado (azul).

  4. Na página da web renderizada, na seção Doação , passe o mouse sobre o botão 100 . A sobreposição da ferramenta Inspecionar é exibida.

  5. Na página da Web renderizada, clique no botão 100 . No DevTools, a ferramenta Elementos é exibida. A árvore DOM mostra o <div class="donationbutton">100</div> elemento do botão 100 . O painel Estilos mostra as regras CSS que se aplicam ao elemento.

    O botão Doação selecionado na ferramenta Elementos

  6. À direita da guia Estilos , selecione a guia Acessibilidade . A Árvore de Acessibilidade do elemento é exibida e expandida:

    Botão do formulário de doação na ferramenta Árvore de Acessibilidade

Qualquer elemento na árvore que não tenha um nome ou tenha uma função de (como o <div class="donationbutton">100</div> elemento) é um problema, pois esse elemento não estará disponível para usuários de generic teclado ou para usuários que estão usando tecnologia adaptativa.

Confira também