Verificando Problemas de Acessibilidade
Executar verificações automáticas de acessibilidade é rápido e fácil com o axe DevTools. Existem 2 tipos de verificações de acessibilidade disponíveis:
Verificação de Página Completa
A partir da tela inicial da extensão, ao clicar em „Verificação de Página Completa“ será executada uma axe-core verificação automatizada de toda a página. Assim que a verificação for concluída, você poderá revisar os resultados da verificação.
Verificação de Página Parcial
A partir da tela inicial da extensão, ao clicar em „Verificação de Página Parcial“, você poderá selecionar um componente específico ou área da página para executar sua verificação. Isso significa que uma verificação completamente isolada será executada apenas dentro do elemento selecionado (todo o conteúdo fora do componente selecionado será efetivamente ignorado). Para fazer a seleção de um elemento, você pode usar o mouse para apontar e clicar em qualquer elemento da página ou usar o „Seletor de Elementos“ compatível com tecnologias assistivas para fazer a seleção com o teclado (sem necessidade do mouse). Uma vez feita a seleção do elemento, você pode clicar em verificar, o que o levará para os resultados da verificação.
Resultados
A visão geral dos „Resultados“ exibe os problemas de acessibilidade encontrados durante uma verificação. A URL onde a verificação foi executada é exibida juntamente com um controle para „Reexecutar“ a verificação. Abaixo disso, para verificações de página parcial, o elemento selecionado será exibido com um controle „Destacar“ para destacar o elemento/componente selecionado na página. Em seguida, você encontrará os resumos dos problemas contendo o número total de problemas encontrados, junto com o número de divisões que funcionam como „filtros“ para visualizar tipos ou categorias específicas de problemas:
- „PROBLEMAS AUTOMÁTICOS“: Problemas encontrados durante uma verificação automatizada
- „PROBLEMAS GUIADOS“: Problemas encontrados durante Teste Guiado Inteligente
- „Precisa de Revisão“: Potenciais problemas nos quais axe-core não conseguiu determinar com absoluta certeza se eram realmente problemas. Isso pode ocorrer frequentemente em cálculos de contraste de cor para texto sobre imagens de fundo ou gradientes complexos.
- Melhor Prática: Problemas que não necessariamente conformam ao critério de sucesso WCAG, mas são práticas aceitas na indústria que melhoram a experiência do usuário
- Impacto (Crítico, Sério, Moderado e Menor): Categorias de impacto dos problemas
Os problemas são agrupados de acordo com a sua „regra“. Para cada regra violada, haverá um botão expansível com a descrição da regra para aprofundar nos problemas encontrados.
Para cada problema, estão disponíveis as seguintes informações:
- Descrição do problema
- „Destacar“ (alternar que destaca o elemento na página)
- „Compartilhar Problema“ (gera uma página compartilhável dedicada ao problema específico encontrado, contendo todos os dados do problema junto com uma captura de tela)
- Link para a página de ajuda dedicada à regra dada („mais informações“)
- „Localização do elemento“ (o seletor CSS gerado para o elemento com o problema de acessibilidade)
- „Inspecionar Elemento“ (permite inspecionar o elemento no painel de elementos das ferramentas para desenvolvedores)
- Código-fonte do elemento
- Orientações de correção (informações sobre como corrigir o problema)
Salvando Resultados
Usuários com uma assinatura „Pro“ poderão salvar seus resultados usando o botão „Salvar Teste“. Uma vez clicado, você será solicitado a dar um nome ao seu registro de teste. Depois disso, Testes Guiados Inteligentes (IGTs) estarão disponíveis para levar seus testes ao próximo nível! Os registros de teste salvos são registros persistentes onde todos os seus dados de teste serão armazenados. Você sempre poderá encontrar seus testes salvos clicando no item „ver testes salvos“ no menu superior.
Salvar seus resultados de uma verificação de página parcial permitirá que você execute IGTs dentro do componente selecionado.