Entendendo os Resultados

Após seguir as instruções de instalação do seu kit de ferramentas, você irá gerar resultados que são enviados para o Developer Hub cada vez que executa seu conjunto de testes. No Developer Hub, você pode visualizar problemas de acessibilidade novos e existentes e acompanhar as tendências ao longo do tempo.

Entendendo a Estrutura do Seu Projeto

O Developer Hub organiza seus dados de acessibilidade de forma diferente, dependendo se seus testes end-to-end utilizam o Git para controle de versão:

Se estiver usando Git, você poderá visualizar diferentes branches do seu projeto e commits individuais realizados nesses branches. A estrutura é a seguinte:
Projeto → Branches → Commits → Lista de Problemas → Detalhes do Problema

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é os problemas encontrados em cada execução. A estrutura é a seguinte:
Projeto → Execuções de Teste → Lista de Problemas → Detalhes do Problema

Trabalhando com Seus Resultados

Quando você abre um projeto, verá uma lista de branches (projetos Git) ou execuções de teste (projetos sem Git).

Seus Resultados em um Relance

Você verá as seguintes informações retornadas do seu teste de acessibilidade:

• Para projetos Git: Nome do branch, 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 problemas que excedem o limite de acessibilidade
• Informações de pacote e versão do kit de ferramentas de acessibilidade que você está usando
• Resumo de comparação mostrando o total de problemas e o número de verificações
• Uma contagem de novos problemas introduzidos e problemas que foram resolvidos (apenas projetos web)
• Pontuação de acessibilidade (somente para projetos móveis): Uma porcentagem (0–100%) mostrando quão acessíveis foram as análises da sessão, detalhada abaixo em Pontuação de Acessibilidade (Somente para Projetos Móveis)
• Botão 'Ver Commits' (apenas para projetos Git) para detalhar commits individuais
• Botão 'Ver Problemas' para ver a lista completa de problemas

Pontuação de Acessibilidade (Somente para Projetos Móveis)

A pontuação de acessibilidade é uma porcentagem (0–100%) mostrada nas páginas de relatório de sessão móvel. Uma pontuação mais alta significa menos problemas graves de acessibilidade ao longo da sessão.

A pontuação é calculada em duas etapas:

1. Cada análise é pontuada com base em seu problema de acessibilidade mais grave:

   • 100% — apenas problemas menores, ou nenhum problema
   • 80% — pelo menos um problema moderado; nenhum problema sério ou crítico
   • 40% — pelo menos um problema sério; nenhum problema crítico
   • 0% — pelo menos um problema crítico

2. A pontuação da sessão é a média de todas as pontuações das análises.

Por exemplo, uma sessão com três análises, uma com apenas problemas menores, uma com um problema sério e uma com um problema crítico, teria uma pontuação de (100 + 40 + 0) / 3 ≈ 47%.

Sessões sem análises exibem um estado vazio em vez de 0%.

Para a especificação completa da fórmula, veja Calcular uma Pontuação na documentação do Axe DevTools Mobile.

Renomeando Sessões

Por padrão, as sessões são identificadas pelo branch do git e informações do commit (projetos Git) ou carimbo de data/hora (projetos sem Git). Você pode definir um nome de exibição personalizado para qualquer sessão para facilitar a identificação de execuções de verificação específicas.

Nomes personalizados aparecem em todo o Developer Hub sempre que uma sessão é referenciada: cabeçalhos de página, títulos de painel, trilhas de navegação e rótulos de comparação. O identificador original do git ou o carimbo de data/hora permanece visível em uma área de metadados na página de problemas.

Para renomear uma sessão, abra sua página de problemas e clique no botão de edição no cabeçalho da página. Administradores de projeto, contribuidores e administradores da organização podem renomear qualquer sessão no projeto.

Informações do Pipeline

Para equipes cujos testes estão usando dados Git com o Axe Watcher, todas as execuções podem ser comparadas com as execuções de CI/CD no branch padrão, para garantir que o código recém-integrado não esteja introduzindo problemas adicionais de acessibilidade. Para configurar a comparação, um administrador do projeto deve configurar o Watcher para executar no branch padrão do repositório - geralmente este é o main (ou master) branch. Esta instância do kit de ferramentas deve ser configurada como uma execução de pipeline.

Assim que os dados da verificação chegam da execução de pipeline designada no branch padrão, os resultados serão exibidos no topo da página. Os usuários podem escolher visualizar vários conjuntos de resultados por chave de API e ver como eles se comparam à execução de pipeline no branch padrão.

Saiba mais sobre a configuração de 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 branches do seu projeto, você pode ver como o último commit em cada branch se compara com a execução mais recente do pipeline no branch padrão.
  • Quando você seleciona um branch individual para visualizar, é possível ver como cada commit exclusivo nesse branch se compara com o commit que veio antes dele.
• Para projetos Gitless: Cada execução de teste é comparada com a execução anterior.

Se você não vê nenhum dado de comparação, é provável que não exista uma análise anterior disponível para comparar, ou que uma análise do pipeline ainda não tenha sido executada no branch padrão.

Saiba mais sobre como usar comparações para rastrear tendências

Saiba Mais Sobre Problemas de Acessibilidade

Após clicar em Exibir Problemas a partir de um branch, commit ou execução de teste, você verá uma página de resumo que lista e agrupa as violações de acessibilidade por regra e nível de impacto.

Tabela de Comparação (Apenas Projetos Web)

Projetos web exibem uma tabela de comparação no topo mostrando:

• Total de problemas nas análises atuais e de referência
• Novos problemas introduzidos
• Problemas previamente existentes
• Problemas que foram resolvidos
• Todos esses são agrupados por gravidade do impacto (Crítico, Sério, Moderado, Leve)

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 móveis), você verá todas as regras de acessibilidade violadas agrupadas por:

• Nome da regra (que você pode selecionar para visualizar 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 focar em problemas específicos:

• Filtrar por nível de impacto (Crítico, Sério, Moderado, Leve)
• Mostrar apenas novos problemas
• Selecionar estados específicos da página

Com projetos móveis, use o filtro para selecionar uma ou várias telas na lista e se concentrar em certos resultados.

Exporte seus resultados:

• Web
  • Exportar JSON para compartilhar facilmente resultados detalhados em formato legível
  • Exportar CSV para planilhas e relatórios
• Móvel
  • Exportar no formato Axe Universal JSON para integração com outras ferramentas

As exportações estarão alinhadas com seus filtros atuais.

Página de Problema Individual

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 um localizador alternativo
• Todos com botões de cópia para uso fácil em suas ferramentas de desenvolvimento

Projetos móveis fornecem:

• Captura de tela com o problema destacado
• Visualização de detalhes: Fornece contexto para o elemento problemático
• Visualização da hierarquia de inspeção: Mostra a árvore de hierarquia para que você localize o local exato e veja as propriedades detalhadas dos elementos

Orientação para Remediação

Cada problema inclui:

• Descrição da regra explicando o problema de acessibilidade
• Links para a Deque University ou páginas de Regras Móveis para orientação abrangente e exemplos de código
• Nível de impacto e tags de acessibilidade (critérios WCAG, melhores práticas)
• Navegação para percorrer todas as instâncias desta violação (ex.: "1 de 5")

Compartilhando Problemas

Clique em Copiar link do problema no topo da página para compartilhar com sua equipe ou adicionar ao seu sistema de rastreamento de problemas.

Permissões de compartilhamento: Os links dos problemas respeitam as configurações de compartilhamento da sua organização. Os membros da equipe precisam de permissões adequadas para visualizar os problemas. Os administradores podem configurar as configurações de compartilhamento em:

• Configuração Global - Definir padrões de compartilhamento em toda a organização
• Configurações do Projeto - Acesse e atualize configurações para projetos individuais em Axe Developer Hub