Pular para o conteúdo principal

Página de Detalhes do Problema

O que é a Página de Detalhes do Problema?​

A página de Detalhes do Problema mostra todos os erros específicos de um tipo de problema. Quando você clica em "Ver Tudo" na página de Problemas, é levado aqui para ver todos os detalhes, todas as páginas afetadas e todos os exemplos de código.

Como acessar esta página?​

Você pode acessar esta página de duas formas:

  1. Da página de Problemas: Clique no botão "Ver Tudo" em um cartão de problema
  2. Link direto: A URL contém o ID do grupo de problemas

O que você encontrará na Página de Detalhes​

A página está organizada em várias seções:

  1. Cabeçalho - Informações do problema e link para voltar
  2. Filtro de Seletor - Para filtrar erros por seletor CSS (apenas PRO)
  3. Lista de Erros - Todos os erros do grupo com detalhes completos
  4. Paginação - Para navegar entre erros se houver muitos

Cabeçalho da Página​

No cabeçalho da página você vê:

No canto superior esquerdo há uma seta que permite retornar à página principal de Problemas.

Informações do Problema​

  • Título: O tipo de problema (por exemplo, "missing_alt_image")
  • Descrição: A descrição completa do problema
  • Badge de Severidade: Badge colorido indicando se é Crítico, Aviso ou Info
  • Contagem de Erros Únicos: Quantos erros únicos existem (após desduplicação)

Botão de Análise​

Disponível apenas para: Plano ENTERPRISE

O botão "Analisar" permite realizar uma nova análise de todas as páginas que têm este problema. Útil para verificar se você corrigiu o problema após fazer alterações.

Filtro de Seletor​

Disponível apenas para: Plano PRO ou superior

O filtro de seletor permite ver apenas erros que têm um seletor CSS específico.

Como funciona​

O seletor CSS é o caminho que identifica onde o elemento está localizado no código da página. Por exemplo:

  • #header img - Imagens no cabeçalho
  • .menu a - Links no menu
  • form input - Campos de entrada em formulários

Como usar o filtro​

  1. Abra o menu suspenso do filtro
  2. Escolha um seletor da lista
  3. A lista é atualizada mostrando apenas erros com esse seletor
  4. Veja o número de resultados abaixo do filtro
  5. Clique em "Limpar Filtro" para ver todos os erros novamente

Dica: Use o filtro quando quiser focar em erros específicos em uma parte particular do site.

Lista de Erros​

A lista mostra todos os erros do grupo, um por cartão. Erros idênticos (mesmo seletor e mesmo HTML) são mostrados apenas uma vez para evitar duplicatas.

Cartão de Erro​

Cada erro é mostrado em um cartão com todas as informações:

Cabeçalho do Cartão:

  • Número do erro: "Erro #1", "Erro #2", etc.
  • Ícone de severidade: Ícone colorido baseado na severidade
  • Badge de severidade: Crítico, Aviso ou Info
  • Badge "Excluído": Se o erro foi excluído, você vê um badge verde

Informações:

  • URL: Link para a página onde o erro foi encontrado (abre em nova aba)
  • Análise: Título da análise da qual o erro vem
  • Nível WCAG: O nível WCAG do erro (A ou AA)

Elemento:

  • Seletor: O seletor CSS que identifica o elemento
  • HTML: O código HTML real do elemento problemático
  • Você pode rolar o HTML se for longo

Recomendação:

  • Uma explicação de como corrigir este erro específico
  • Sugestões práticas para corrigi-lo

Paginação​

Se houver mais de 50 erros, você vê uma barra de paginação na parte inferior da página.

Como funciona​

  • 50 erros por página: Cada página mostra no máximo 50 erros
  • Navegação: Você pode ir para frente e para trás entre as páginas
  • Números de página: Você vê até 5 números de página por vez
  • Contador: Você vê "Mostrando 1-50 de 150 erros únicos"

Como usar a paginação​

  • Botão "Anterior": Ir para a página anterior (desabilitado se estiver na primeira página)
  • Números de página: Clique em um número para ir diretamente para essa página
  • Botão "Próximo": Ir para a próxima página (desabilitado se estiver na última página)

Dica: A paginação é redefinida quando você muda o filtro, então você sempre começa da primeira página.

Barra de Progresso​

Quando você executa uma análise (botão Analisar), você vê uma barra de progresso fixa na parte inferior da página.

O que mostra:

  • Título: "Análise de páginas em progresso"
  • Progresso: Número de análises concluídas / total (por exemplo, "3/10")
  • Barra: Barra visual mostrando a porcentagem de conclusão
  • URL Atual: Qual página está sendo analisada no momento

A barra permanece visível até que todas as análises sejam concluídas.

Desduplicação Automática​

A página remove automaticamente erros duplicados. Se o mesmo erro (mesmo seletor e mesmo HTML) aparecer várias vezes, é mostrado apenas uma vez.

Por que é útil:

  • Evita ver o mesmo erro repetido centenas de vezes
  • Permite focar em erros únicos
  • Reduz o número de erros para gerenciar

Como funciona:

  • Dois erros são considerados idênticos se tiverem:
    • O mesmo seletor CSS
    • O mesmo código HTML
  • Apenas o primeiro erro encontrado é mostrado

Estados da Página​

Carregando​

Quando a página está carregando, você vê um spinner animado e a mensagem "Carregando...". Aguarde o carregamento terminar.

Sem Erros​

Se não houver erros (ou o filtro não mostrar resultados), você vê uma mensagem com:

  • Ícone de alerta
  • Título: "Nenhum erro encontrado"
  • Descrição explicando por que não há erros
  • Link para retornar à página de Problemas

Erro de Carregamento​

Se houver um erro de carregamento, a página mostra uma mensagem de erro. Tente recarregar a página.

Como usar a Página de Detalhes​

1. Ver Todos os Detalhes​

Esta página mostra todos os detalhes de cada erro:

  • Onde está localizado exatamente (seletor)
  • Como aparece no código (HTML)
  • Em qual página foi encontrado
  • Como corrigi-lo (recomendação)

2. Usar o Filtro para Focar​

Se houver muitos erros:

  1. Use o filtro de seletor para ver apenas erros específicos
  2. Corrija todos os erros com o mesmo seletor juntos
  3. Remova o filtro e passe para o próximo grupo

3. Verificar Correções​

Após fazer alterações:

  1. Clique em "Analisar" para verificar se os erros foram resolvidos
  2. Aguarde a análise terminar
  3. Verifique se o número de erros diminuiu

4. Navegar Entre Páginas​

Se houver muitos erros:

  1. Use a paginação para ver todos os erros
  2. Corrija erros página por página
  3. Retorne à página de Problemas para ver o progresso geral

Dicas​

Organização​

  • Comece da primeira página: Os erros estão ordenados, comece do primeiro
  • Use o filtro: Se você souber que um erro está em uma parte específica do site, use o filtro de seletor
  • Trabalhe em grupos: Corrija todos os erros com o mesmo seletor juntos

Verificação​

  • Analise após correções: Use o botão "Analisar" para verificar se suas correções funcionam
  • Verifique o número: Se o número de erros únicos diminuir, você está progredindo
  • Verifique várias páginas: Se um erro aparecer em muitas páginas, pode ser um problema sistêmico

Detalhes​

  • Leia as recomendações: Cada erro tem uma recomendação específica sobre como corrigi-lo
  • Olhe o HTML: O HTML mostra exatamente o que está no código
  • Use o seletor: O seletor diz onde encontrar o elemento no código

Perguntas Frequentes​

Por que vejo menos erros aqui do que na página de Problemas?​

A página de Detalhes desduplica automaticamente erros idênticos. Se o mesmo erro (mesmo seletor e HTML) aparecer em várias páginas, é mostrado apenas uma vez. Na página de Problemas você vê o número total, aqui você vê apenas erros únicos.

O que significa "Erros Únicos"?​

"Erros Únicos" significa erros que são diferentes uns dos outros. Se o mesmo erro aparecer 10 vezes, é contado como 1 erro único. Isso ajuda você a entender quantos tipos diferentes de erros precisa corrigir.

Posso ver todos os erros sem paginação?​

Não, a paginação é necessária quando há mais de 50 erros para manter a página rápida e gerenciável. Você pode navegar entre páginas usando os botões de paginação.

O filtro de seletor funciona em todos os erros?​

Sim, o filtro funciona em todos os erros do grupo, não apenas nos da página atual. Quando você muda o filtro, a paginação é redefinida e você começa da primeira página.

O que acontece se eu excluir um erro?​

Se você excluir um erro da página principal de Problemas, aqui você verá um badge "Excluído" no erro. O erro não será mais contado nas estatísticas.

Quanto tempo leva para analisar todas as páginas?​

Depende de quantas páginas têm o problema. A barra de progresso mostra o progresso em tempo real. Cada página é analisada uma por vez.

Conclusão​

A página de Detalhes do Problema oferece uma visão completa de todos os erros de um tipo específico. Use esta página para ver todos os detalhes, filtrar para focar em erros específicos e verificar suas correções com novas análises. É a ferramenta perfeita para corrigir sistematicamente problemas de acessibilidade no seu site.