Utilize a ferramenta Inspecionar para detetar problemas de acessibilidade ao pairar o rato sobre a página Web

A ferramenta Inspecionar apresenta informações sobre elementos individuais à medida que paira o cursor sobre a página Web composta, incluindo informações de acessibilidade. Por outro lado, a ferramenta Problemas comunica automaticamente problemas para toda a página Web.

O botão da ferramenta Inspecionar () encontra-se no canto superior esquerdo das DevTools. Quando clica no botão Inspecionar ferramenta, o botão fica azul, indicando que a ferramenta Inspecionar está ativa.

Quando a ferramenta Inspecionar estiver ativa, pairar o cursor sobre qualquer elemento na página Web composta apresenta a sobreposição Inspecionar . Esta sobreposição apresenta informações gerais e informações de acessibilidade sobre esse elemento. A secção Acessibilidade da sobreposição Inspecionar apresenta informações sobre o contraste de cor do texto, o texto do leitor de ecrã e o suporte de teclado:

O artigo main sobre a ferramenta Inspecionar é Analisar páginas HTML com a ferramenta Inspecionar. O artigo atual centra-se nas funcionalidades de acessibilidade da ferramenta Inspecionar .

Verificar o contraste de texto, o texto do leitor de ecrã e o suporte de teclado dos elementos individuais

1. Abra a página Web de demonstração de teste de acessibilidade numa nova janela ou separador.

2. Clique com o botão direito do rato em qualquer parte da página Web e, em seguida, selecione Inspecionar. Em alternativa, prima F12. O DevTools é aberto junto à página Web.

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

   

4. Paire o cursor sobre qualquer elemento na página Web de demonstração composta. A ferramenta Inspecionar mostra uma sobreposição de informações junto ao elemento na página Web composta. A sobreposição de informações contém uma secção Acessibilidade :

   

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

• O contraste define se um elemento pode ser compreendido por pessoas com visão reduzida. A proporção de contraste definida pelas Diretrizes do WCAG indica se existe ou não contraste suficiente.

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

• Nome e Função são o que a tecnologia de apoio, como os leitores de ecrã, irá comunicar sobre o elemento.

  • O Nome é o conteúdo de texto do elemento pairado. Para o elemento <a href="/">About Us</a>, o Nome apresentado na ferramenta Inspecionar é Sobre Nós.
  • A Função do elemento . Normalmente, este é o nome do elemento, como article, img , linkou heading. Os div elementos e span são referidos como generic.

• O foco do teclado indica se os utilizadores podem aceder ao elemento independentemente do dispositivo de entrada.

  • Um ícone de marca de marcar verde indica que o elemento é centrado no teclado.
  • Um círculo cinzento com linha diagonal indica que o elemento não é centrado no teclado.

Informações adicionais na sobreposição Inspecionar

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

• Tipo de esquema. Se o elemento estiver posicionado com uma caixa de flexão ou grelha, é apresentado um ícone ( de grelha).
• Nome do elemento, como h1, h2ou div.
• As dimensões do elemento em píxeis.
• A cor como um cronómetro de cores (ou um quadrado pequeno e colorido) e como uma cadeia (como #336699).
• Informações do tipo de letra, como famílias de tipos de letra e tamanho.
• Margem e preenchimento em píxeis.

Confira também

• Analisar páginas HTML com a ferramenta Inspecionar
• Inspecionar um nó
• Verificar o contraste da cor do texto no estado predefinido com a ferramenta Inspecionar