Entender Resultados
Visualize e gerencie questões de acessibilidade com o Axe Developer Hub
Após seguir as instruções de instalação do seu kit de ferramentas, você estará gerando resultados que são enviados para o Developer Hub toda vez que rodar seu conjunto de testes. No Developer Hub, você pode visualizar novas e existentes questões de acessibilidade e acompanhar tendências ao longo do tempo.
Entendendo a Estrutura do Seu Projeto
O Developer Hub organiza seus dados de acessibilidade de maneira diferente, dependendo se seus testes end-to-end usam Git para controle de versão:
Se estiver usando Git, você poderá visualizar diferentes ramos do seu projeto e commits individuais feitos nesses ramos. A estrutura é a seguinte:
Projeto → Ramos → Commits → Lista de Questões → Detalhes da Questão
Os dados do Git são coletados automaticamente para projetos Axe Watcher. As informações do Git correspondem ao teste end-to-end, que podem não corresponder exatamente ao código real sendo testado se o código estiver em um repositório separado do teste end-to-end.
Use nossas APIs para desativar a coleta de dados do Git para seu projeto Watcher:
Se não estiver usando Git com seu projeto web, ou se estiver visualizando um projeto móvel, você verá execuções de teste individuais e poderá navegar até as questões encontradas em cada execução. A estrutura é a seguinte:
Projeto → Execuções de Teste → Lista de Questões → Detalhes da Questão
Trabalhando com Seus Resultados
Quando você abre um projeto, verá uma lista de ramos (projetos Git) ou execuções de teste (projetos sem Git).
Seus Resultados em Resumo
Você verá as seguintes informações retornadas do seu teste de acessibilidade:
- Para projetos Git: Nome do ramo, SHA do último commit e mensagem do commit para o teste end-to-end sendo executado
- Para projetos sem Git: Carimbo de data/hora da execução do teste
- Número de questões que excedem o limiar de acessibilidade
- Informações de pacote e versão para o kit de ferramentas de acessibilidade que você está usando
- Resumo da comparação mostrando o total de questões e a contagem de varreduras
- Uma contagem de novas questões introduzidas e questões que foram resolvidas (apenas projetos web)
- Botão 'Ver Commits' (apenas projetos Git) para aprofundar em commits individuais
- Botão 'Ver Questões' para ver a lista completa de questões
Informações do Pipeline
Para equipes cujos testes estão usando dados do Git com o Axe Watcher, todas as execuções podem ser comparadas com as execuções de CI/CD no ramo padrão, para garantir que o novo código mesclado não esteja introduzindo questões adicionais de acessibilidade. Para configurar a comparação, um administrador do projeto deve definir o Watcher para rodar no ramo padrão do repositório – geralmente é o main (ou master) ramo. Esta instância do kit de ferramentas deve ser configurada como uma execução de pipeline.
Assim que os dados de varredura vierem da execução de pipeline designada no ramo padrão, os resultados serão exibidos no topo da página. Os usuários podem optar por visualizar vários conjuntos de resultados por chave de API e ver como eles se comparam à execução do pipeline no ramo padrão.
Saiba mais sobre como configurar execuções de pipeline com Axe Watcher em Ambientes de Integração Contínua (CI)
Entendendo Comparações
As informações de comparação fornecidas para projetos web ajudam você a entender o que mudou:
- Para projetos Git:
- Na página que exibe todos os ramos do seu projeto, você pode ver como o último commit em cada ramo se compara à última execução de pipeline no ramo padrão.
- Quando você seleciona um ramo individual para visualizar, pode ver como cada commit único naquele ramo se compara ao commit que veio antes dele.
- **Para projetos sem Git:** Cada execução de teste é comparada com a execução anterior.
Se você não visualizar dados de comparação, é provável que nenhuma varredura anterior estivesse disponível para comparar, ou uma varredura de pipeline ainda não foi executada no branch padrão.
Saiba Mais Sobre Problemas de Acessibilidade
Depois de clicar em **Ver Problemas** a partir de um branch, commit ou execução de teste, você verá uma página de resumo listando e agrupando as violações de acessibilidade por regra e nível de impacto.
Tabela de Comparação (Somente Projetos Web)
Os projetos web exibem uma tabela de comparação no topo mostrando:
- Total de problemas nas varreduras atuais e de referência
- Novos problemas introduzidos
- Problemas previamente existentes
- Problemas que foram resolvidos
- Todos estes são agrupados por gravidade do impacto (Crítico, Grave, Moderado, Menor)
**Nota:** Projetos móveis não incluem esta tabela de comparação.
Lista de Regras
Abaixo da seção de comparação (ou no topo para mobile), você verá todas as regras de acessibilidade violadas agrupadas por:
- Nome da regra (que você pode selecionar para ver problemas individuais)
- Nível de impacto
- Número de violações encontradas para essa regra
Filtragem e Exportação
Com **projetos web**, use os controles de filtro para se concentrar em problemas específicos:
- Filtrar por nível de impacto (Crítico, Grave, Moderado, Menor)
- Mostrar apenas novos problemas
- Selecionar estados específicos de páginas
Com **projetos móveis**, use o filtro para selecionar uma ou várias telas na lista e focar em determinados resultados.
Exporte seus resultados:
- **Web**
- Exporte JSON para compartilhar facilmente resultados detalhados em formato legível por humanos
- Exporte CSV para planilhas e relatórios
- **Mobile**
- Exporte no formato JSON Universal Axe para integração com outras ferramentas
As exportações corresponderão aos seus filtros atuais.
Página de Problema Único
Clique em qualquer nome de regra na lista de problemas para ver informações detalhadas sobre cada violação.
Encontrando Problemas no Seu Código
**Projetos web** fornecem:
- Código-fonte do elemento (trecho HTML)
- Seletor CSS para localizar o elemento
- Expressão XPath como localizador alternativo
- Todos com botões copiar para uso fácil nas suas ferramentas de desenvolvimento
**Projetos móveis** fornecem:
- Captura de tela com o problema destacado
- Visão de Detalhes: Oferece contexto para o elemento problemático
- Visão de Inspeção de Hierarquia: Mostra a árvore hierárquica para que você localize exatamente o local e veja propriedades detalhadas do elemento
Orientação para Remediação
Cada problema inclui:
- Descrição da regra explicando o problema de acessibilidade
- Links para Deque University ou páginas de Regras Móveis para orientação abrangente e exemplos de código
- Nível de impacto e etiquetas de acessibilidade (critérios WCAG, melhores práticas)
- Navegação para percorrer todas as instâncias desta violação (por exemplo, "1 de 5")
Compartilhamento de Problemas
Clique em **Copiar link do problema** no topo da página para compartilhar com sua equipe ou adicionar ao sistema de acompanhamento de problemas.
**Permissões de compartilhamento:** Os links de problemas respeitam as configurações de compartilhamento da sua organização. Os membros da equipe precisam de permissões apropriadas para visualizar os problemas. Os administradores podem configurar as configurações de compartilhamento em:
- Configuração Global - Definir padrões de compartilhamento para toda a organização
- Configurações do Projeto - Acessar e atualizar configurações para projetos individuais no Axe Developer Hub
