Teste automaticamente uma página da Web em busca de 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. Por padrão, a ferramenta Problemas está aberta no painel Visualização Rápida na parte inferior do DevTools. Este artigo usa a página da Web de demonstração de teste de acessibilidade para percorrer a seção Acessibilidade da ferramenta Problemas .

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

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

• Na ferramenta Elementos , na árvore DOM, pressione Shift enquanto clica 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 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.

   No canto superior direito, o contador Problemas () é exibido. O contador de problemas é um ícone de balão de fala junto 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 de Problemas.

4. Clique no contador Problemas. A ferramenta Problemas é aberta no painel Visualização Rápida 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 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. No canto superior direito, clique no contador Problemas (). A ferramenta Problemas é aberta no painel Visualização Rápida 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 nos Elementos .

   

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

   O seguinte código é exibido agora:

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

   No código acima, o label elemento é usado incorretamente, porque 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:

   • Aninhe 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 os 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 a etiqueta Outros no formulário de doação.

   Uma caixa indicadora de foco é exibida corretamente na caixa de texto de entrada ao lado do rótulo Outro , porque há valores correspondentes for e id de atributos.

3. Na ferramenta Problemas, clique em Leituras adicionais para saber mais sobre o problema. Para abrir o link em uma nova guia, pressione Ctrl (Windows, Linux) ou Command (macOS) enquanto clica no link:

   

Verifique se as imagens têm texto alt

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

Para marcar automaticamente se o texto alt é fornecido para imagens, use a ferramenta Problemas, que tem uma seção de Acessibilidade. Por padrão, a ferramenta Problemas está aberta no painel Visualização Rápida na parte inferior do DevTools.

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. No canto superior direito do DevTools, clique no contador de 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 sem texto Alt:

   

Consulte As imagens devem ter texto alternativo.

Verifique se as cores do texto têm contraste suficiente

Para marcar automaticamente se as cores do texto têm contraste suficiente, use a ferramenta Problemas, que tem uma seção de Acessibilidade. Por padrão, a ferramenta Problemas está aberta no painel Visualização Rápida na parte inferior do DevTools.

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. No canto superior direito do DevTools, clique no contador de 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 suas configurações, a guia Problemas pode ter um aviso como Os usuários podem ter dificuldades para ler o conteúdo do texto devido ao contraste de cor insuficiente. Você pode expandir esse aviso e, em seguida, expandir 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 é destacado, 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 sob input. A ferramenta Problemas é exibida e mostra o problema desse elemento.

   

Confira também

• Encontrar e corrigir problemas usando a ferramenta Problemas