Testar automaticamente uma página da Web para problemas de acessibilidade

A ferramenta Problemas inclui uma seção Acessibilidade que relata automaticamente problemas como texto alternativo ausente em imagens, rótulos ausentes em campos de formulário e contraste insuficiente de cores de texto. A ferramenta Problemas está dentro da Gaveta na parte inferior do DevTools. Este artigo usa a página da Web de demonstração de teste de acessibilidade para avançar usando a seção Acessibilidade da ferramenta Problemas .

Há várias maneiras de abrir a ferramenta Problemas, como:

• Clique no contador Problemas () no canto superior direito de DevTools.

• Na ferramenta Elementos , na árvore DOM, pressione Shift ao clicar em um sublinhado ondulado em um elemento.

• No Menu de Comando, digite problemas, selecione Mostrar Problemas e pressione Enter.

Exibir a seção Acessibilidade da ferramenta Problemas

1. Abra a página da Web de demonstração de 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.

   No canto superior direito, o contador Problemas () é exibido. O contador Problemas é um ícone de bolha de fala, juntamente com o número de problemas detectados automaticamente.

   

3. Atualize a página, pois alguns problemas são relatados com base em solicitações de rede. Observe a contagem atualizada no contador Problemas.

4. Clique no contador Problemas. A ferramenta Problemas é aberta, na Gaveta , na parte inferior do DevTools.

   

5. Na guia Problemas , expanda a seção Acessibilidade .

Verifique se os campos de entrada têm rótulos

Para marcar se os campos de entrada têm rótulos conectados a eles, use a ferramenta Problemas, que verifica automaticamente toda a página da Web e relata esse problema na seção Acessibilidade.

1. Abra a página da Web de demonstração de 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. No canto superior direito, clique no contador Problemas (). A ferramenta Problemas é aberta, na Gaveta , na parte inferior do DevTools.

4. Na guia Problemas , expanda a seção Acessibilidade .

5. Expanda o AvisoForm elements must have labels: Element has no title attribute Element has no placeholder attribute.

6. Clique no link Abrir em Elementos .

   

   A ferramenta Elementos é aberta, com o elemento realçado na árvore DOM. O painel Estilos exibe as regras CSS aplicadas para o elemento.

   O código a seguir agora é exibido:

   <label>Search</label>
   <input type="search">
   <input type="submit" value="go">
   

   No código acima, o label elemento é usado incorretamente, pois não há conexão entre o label elemento e um elemento específico input . Para conectar o label elemento a um elemento específico input , use qualquer uma das seguintes opções:

   • Aninhar o input elemento dentro do label elemento.

   • label No elemento, adicione um for atributo que corresponda a um id atributo do input elemento.

Há também outra maneira de testar a falta de conexões entre elementos:

1. Na ferramenta Elementos , selecione o <label>Search</label> elemento na árvore DOM.

   Na página da Web, observe que o foco só aparece no rótulo Pesquisar e não na caixa de texto de entrada. A implementação correta colocaria o search foco na caixa de texto de entrada e no rótulo Pesquisar .

2. Como exemplo de uma conexão correta, selecione o Outro rótulo no formulário de doação.

   Uma caixa de indicador de foco aparece corretamente na caixa de texto de entrada ao lado do rótulo Outro , pois há valores correspondentes for e id de atributo.

3. Na ferramenta Problemas, clique na leitura Adicional para saber mais sobre o problema. Para abrir o link em uma nova guia, pressione Ctrl (Windows, Linux) ou Comando (macOS) ao clicar no link:

   

Verificar se as imagens têm texto alt

O teste de acessibilidade básico requer garantir que o texto alternativo (também chamado de texto alt) seja fornecido para imagens.

Para marcar automaticamente se o texto alt é fornecido para imagens, use a ferramenta Problemas, que tem uma seção Acessibilidade. A ferramenta Problemas está localizada na Gaveta na parte inferior do DevTools.

1. Abra a página da Web de demonstração de 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. No canto superior direito de DevTools, clique no contador Problemas . A ferramenta Problemas é aberta.

4. Na guia Problemas , expanda o aviso Images must have alternate text: Element has no title attribute. Há quatro instâncias de imagens que não têm texto alt:

   

Consulte Imagens devem ter texto alternativo.

Verifique se as cores de texto têm contraste suficiente

Para marcar automaticamente se as cores de texto têm contraste suficiente, use a ferramenta Problemas, que tem uma seção Acessibilidade. A ferramenta Problemas está localizada na Gaveta na parte inferior do DevTools.

1. Abra a página da Web de demonstração de 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. No canto superior direito de DevTools, clique no contador Problemas . A ferramenta Problemas é aberta.

   Pode haver avisos de que dois elementos na página da Web de demonstração não têm contraste suficiente.

   

4. Dependendo das configurações, a guia Problemas pode ter um aviso, pois os usuários podem ter dificuldades para ler conteúdo de texto devido ao contraste de cores insuficiente. Você pode expandir esse aviso e expandir os recursos afetados. Uma lista de elementos aparece com uma lista de elementos que não têm contraste suficiente.

5. Clique no li.high elemento. Na página da Web renderizada, o link Cães na seção Doar é realçado, exibindo uma pequena sobreposição de informações. Essa é a mesma sobreposição que aparece quando você passa o mouse sobre um elemento na árvore DOM na ferramenta Elementos .

   

Sublinhados ondulados na árvore DOM indicam problemas detectados automaticamente

A árvore DOM na ferramenta Elementos sinaliza problemas diretamente no HTML com sublinhados ondulados. Esses problemas são relatados pela ferramenta Problemas. Quando você pressiona Shift ao clicar em qualquer elemento com um sublinhado ondulado, a ferramenta Problemas é aberta.

1. Na ferramenta Elementos , na árvore DOM, pressione Shift ao clicar no elemento <input type="search">, que tem uma linha ondulada em input. A ferramenta Problemas é exibida e mostra o problema para esse elemento.

   

Confira também

• Localizar e corrigir problemas usando a ferramenta Problemas