Use a ferramenta Inspecionar para detectar problemas de acessibilidade passando o mouse sobre a página da Web

A ferramenta Inspecionar exibe informações sobre elementos individuais à medida que você passa o mouse sobre a página da Web renderizada, incluindo informações de acessibilidade. Por outro lado, a ferramenta Problemas relata automaticamente os problemas de toda a página da Web.

O botão da ferramenta Inspecionar () está no canto superior esquerdo do DevTools. Quando você clica no botão da ferramenta Inspecionar , o botão fica azul, indicando que a ferramenta Inspecionar está ativa.

Quando a ferramenta Inspecionar está ativa, passar o mouse sobre qualquer elemento na página da Web renderizada exibe a sobreposição Inspecionar . Essa sobreposição exibe informações gerais e de acessibilidade sobre esse elemento. A seção Acessibilidade da sobreposição Inspecionar exibe informações sobre o contraste da cor do texto, texto do leitor de tela e suporte ao teclado:

O artigo principal sobre a ferramenta Inspecionar é Analisar páginas HTML usando a ferramenta Inspecionar. O presente artigo se concentra nos recursos de acessibilidade da ferramenta Inspecionar .

Verificar elementos individuais quanto ao contraste do texto, texto do leitor de tela e suporte ao teclado

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

2. Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web.

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

   

4. Passe o mouse sobre qualquer elemento na página da Web de demonstração renderizada. A ferramenta Inspecionar mostra uma sobreposição de informações ao lado do elemento na página da Web renderizada. A sobreposição de informações contém uma seção de Acessibilidade :

   

A seção Acessibilidade contém as seguintes informações:

• O contraste define se um elemento pode ser compreendido por pessoas com visão reduzida. A taxa de contraste , conforme definida pelas Diretrizes WCAG , indica se há contraste suficiente ou não.

  • Um ícone de marca de seleção verde indica contraste suficiente.
  • Um ícone laranja com ponto de exclamação indica que o contraste é insuficiente.

• Nome e Função são o que a tecnologia adaptativa, como leitores de tela, relatará sobre o elemento.

  • O Nome é o conteúdo de texto do elemento focalizado. Para o elemento <a href="/">About Us</a>, o Nome mostrado na ferramenta Inspecionar é Sobre nós.
  • A função do elemento. Geralmente é o nome do elemento, como article, img , link, ou heading. Os div elementos and span são chamados de generic.

• Keyboard-focusing indica se os usuários podem acessar o elemento independentemente do dispositivo de entrada.

  • Um ícone de marca de seleção verde indica que o elemento pode ser focalizado no teclado.
  • Um círculo cinza com linha diagonal indica que o elemento não é focalizável no teclado.

Informações adicionais na sobreposição Inspecionar

A parte superior da sobreposição Inspecionar , que está acima da seção Acessibilidade , lista os seguintes detalhes do elemento.

• Tipo de layout. Se o elemento for posicionado usando um flexbox ou grade, um ícone () será exibido.
• Nome do elemento, como h1, h2, ou div.
• As dimensões do elemento em pixels.
• A cor como uma amostra de cor (ou um pequeno quadrado colorido) e como uma cadeia de caracteres (como #336699).
• Informações de fonte, como tamanho e famílias de fontes.
• Margem e preenchimento em pixels.

Confira também

• Analisar páginas HTML usando a ferramenta Inspecionar
• Inspecionar um nó
• Verifique o contraste da cor do texto no estado padrão usando a ferramenta Inspecionar