Pular para o conteúdo principal

Página de Problemas

O que é a Página de Problemas?

A página de Problemas é onde você pode ver todos os problemas de acessibilidade encontrados durante as análises do seu site. Os problemas estão organizados por tipo e severidade, para que você possa entender facilmente o que corrigir e onde intervir.

O que você encontrará na Página de Problemas

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

  1. Estatísticas Rápidas - Cinco cartões com os números principais
  2. Filtros e Pesquisa - Para encontrar problemas específicos (apenas PRO)
  3. Lista de Problemas - Organizada por severidade (Crítico, Aviso, Info)

Estatísticas Rápidas

No topo da página você vê cinco cartões com as estatísticas principais:

Total de Problemas

Este cartão mostra o número total de problemas encontrados em todas as análises. É o número geral de todos os problemas, independentemente da severidade.

Problemas Críticos

Este cartão mostra quantos problemas críticos existem. Problemas críticos são os mais importantes para corrigir porque impedem ou tornam muito difícil o acesso ao conteúdo.

Problemas de Aviso

Este cartão mostra quantos problemas de aviso existem. Avisos tornam o uso do site mais difícil, mas não o bloqueiam completamente.

Problemas de Info

Este cartão mostra quantos problemas informativos existem. São sugestões e melhores práticas para melhorar a acessibilidade.

Níveis WCAG

Este cartão mostra a distribuição de problemas por nível WCAG:

  • A: Problemas que violam requisitos básicos (Nível A)
  • AA: Problemas que violam requisitos padrão (Nível AA)

Filtros e Pesquisa

Disponível apenas para: Plano PRO ou superior

Se você tiver um plano PRO ou ENTERPRISE, pode usar filtros para encontrar problemas específicos.

Pesquisa

O campo de pesquisa permite pesquisar problemas por:

  • Descrição do problema
  • Recomendação
  • Seletor de elemento
  • Referência WCAG

Como usar:

  1. Digite o texto que deseja pesquisar no campo de pesquisa
  2. Os resultados são atualizados automaticamente enquanto você digita
  3. A pesquisa não diferencia maiúsculas/minúsculas

Filtro de Severidade

O menu suspenso permite filtrar problemas por severidade:

  • Todos: Mostra todos os problemas
  • Crítico: Mostra apenas problemas críticos
  • Aviso: Mostra apenas problemas de aviso
  • Info: Mostra apenas problemas informativos

Como usar:

  1. Clique no menu suspenso
  2. Escolha a severidade que deseja ver
  3. A lista é atualizada automaticamente

Lista de Problemas

Os problemas estão organizados em três seções principais, ordenadas por importância:

Seção de Problemas Críticos

Esta seção mostra todos os problemas críticos encontrados. São os mais importantes para corrigir.

Características:

  • Cor vermelha para indicar urgência
  • Ícone de triângulo de alerta
  • Badge com o número de problemas críticos

Seção de Problemas de Aviso

Esta seção mostra todos os problemas de aviso encontrados. São importantes, mas menos urgentes que os críticos.

Características:

  • Cor amarela para indicar atenção
  • Ícone de círculo de alerta
  • Badge com o número de problemas de aviso

Seção de Problemas de Info

Esta seção mostra todos os problemas informativos encontrados. São sugestões úteis, mas não urgentes.

Características:

  • Cor azul para indicar informação
  • Ícone de informação
  • Badge com o número de problemas de info

Cartão de Problema

Cada problema é mostrado em um cartão com todas as informações necessárias.

Cabeçalho do Cartão

No cabeçalho do cartão você vê:

  • Tipo de problema: O nome do tipo de problema (por exemplo, "missing_alt_image")
  • Número de erros: Quantos erros deste tipo foram encontrados
  • Severidade: Badge colorido indicando severidade (Crítico, Aviso, Info)
  • Nível WCAG: Badge indicando nível WCAG (A ou AA)
  • Páginas afetadas: Quantas páginas têm este problema

Conteúdo do Cartão

No conteúdo do cartão você vê:

Descrição do Problema

  • Uma descrição clara do que é o problema
  • Ícone colorido baseado na severidade

Recomendação

  • Uma explicação de como corrigir o problema
  • Sugestões práticas para corrigi-lo

Referências

  • Referência WCAG: A referência às diretrizes WCAG
  • Referência EAA: A referência às diretrizes EAA
  • Páginas afetadas: O número de páginas que têm este problema

Páginas e Análises

  • Lista das primeiras 5 páginas que têm este problema
  • Para cada página você vê:
    • Título da página (ou hostname se não disponível)
    • URL completa
    • Botão "Relatório" para ver o relatório detalhado dessa página
  • Se houver mais de 5 páginas, você vê uma mensagem indicando quantas outras páginas existem

Exemplos de Código

  • Até 3 exemplos de código mostrando onde o problema é encontrado
  • Para cada exemplo você vê:
    • Título da página onde foi encontrado
    • Seletor de elemento (onde está localizado no código)
    • HTML do elemento (o código HTML real)

Ações Disponíveis

Para cada problema você pode realizar várias ações:

Excluir (apenas ENTERPRISE)

  • Exclui este tipo de problema dos relatórios
  • Útil quando você corrigiu o problema e não quer mais vê-lo nos relatórios
  • O botão está desabilitado se o problema já foi excluído

Incluir (apenas ENTERPRISE)

  • Inclui este tipo de problema nos relatórios novamente
  • Útil se você excluiu um problema por engano ou se ele reapareceu
  • O botão está desabilitado se o problema não está excluído

Analisar (apenas ENTERPRISE)

  • Realiza 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
  • Mostra uma barra de progresso durante a análise
  • No final mostra um resumo com os resultados

Ver Tudo

  • Abre uma página detalhada com todos os erros deste tipo
  • Mostra todos os exemplos e todas as páginas afetadas
  • Útil para ver todos os detalhes em uma única página

Barra de Progresso

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

O que mostra:

  • Título: "Análise 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.


Estados da Página

Carregando

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

Sem Problemas

Se não houver problemas (ou os filtros não mostrarem resultados), você vê uma mensagem com:

  • Ícone de marca de seleção verde
  • Título: "Nenhum problema encontrado"
  • Descrição explicando por que não há problemas

Sem Análises

Se você ainda não fez nenhuma análise, não verá problemas. Neste caso:

  1. Vá para o Dashboard
  2. Analise seu site
  3. Retorne à página de Problemas para ver os resultados

Como usar a Página de Problemas

1. Comece com Problemas Críticos

Problemas críticos são os mais importantes. Sempre comece com eles:

  1. Vá para a seção "Problemas Críticos"
  2. Leia a descrição e a recomendação
  3. Olhe os exemplos de código para entender onde intervir
  4. Corrija o problema no seu site
  5. (Opcional) Use "Analisar" para verificar se foi corrigido

2. Use Filtros para Encontrar Problemas Específicos

Se você está procurando um problema específico:

  1. Use o campo de pesquisa para pesquisar por palavra-chave
  2. Ou use o filtro de severidade para ver apenas críticos, avisos ou info
  3. Combine pesquisa e filtro para resultados mais precisos

3. Excluir Problemas Corrigidos

Após corrigir um problema:

  1. Clique em "Excluir" para removê-lo dos relatórios
  2. O problema não aparecerá mais nas estatísticas
  3. Se o problema reaparecer no futuro, você pode usar "Incluir" para colocá-lo de volta

4. Verificar Correções

Após fazer alterações no site:

  1. Clique em "Analisar" para o problema que você corrigiu
  2. Aguarde a análise terminar
  3. Verifique se o problema foi resolvido

5. Ver Detalhes Completos

Para ver todos os detalhes de um problema:

  1. Clique em "Ver Tudo"
  2. Veja todas as páginas afetadas
  3. Veja todos os exemplos de código
  4. Tenha uma visão completa do problema

Dicas

Prioridade

  1. Críticos primeiro: Sempre corrija problemas críticos primeiro
  2. Depois avisos: Após os críticos, passe para avisos
  3. Finalmente info: Sugestões de info podem esperar

Organização

  • Use filtros: Filtros ajudam você a focar no que interessa
  • Agrupe por tipo: Problemas já estão agrupados por tipo, então você pode corrigir todos os similares juntos
  • Conte páginas: O número de páginas afetadas diz o quão difundido o problema é

Verificação

  • Analise após correções: Use o botão "Analisar" para verificar se suas correções funcionam
  • Exclua apenas quando tiver certeza: Exclua um problema apenas quando tiver certeza de que o corrigiu completamente
  • Verifique várias páginas: Se um problema aparecer em muitas páginas, pode ser um problema sistêmico para corrigir de uma vez por todas

Perguntas Frequentes

Por que alguns problemas aparecem várias vezes?

Problemas são agrupados por tipo e descrição. Se você vê o mesmo problema em várias páginas, ele é mostrado apenas uma vez com o número de páginas afetadas. Isso permite ver o impacto geral do problema.

O que significa "Páginas afetadas"?

"Páginas afetadas" indica quantas páginas diferentes têm este problema. Se você vê "5 páginas", significa que este problema foi encontrado em 5 páginas diferentes do seu site.

Posso excluir um problema de uma única página?

Não, a exclusão funciona por tipo de problema. Se você excluir um problema, ele é excluído de todas as páginas. Se você quiser gerenciar problemas individuais, use a página de detalhes do problema.

O que acontece quando excluo um problema?

Quando você exclui um problema:

  • Ele não aparece mais nas estatísticas
  • Não é contado nos relatórios
  • Você sempre pode re-incluí-lo com o botão "Incluir"

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.

Posso ver todos os exemplos de código?

Sim! Clique em "Ver Tudo" para ver uma página detalhada com todos os exemplos e todas as páginas afetadas.


Conclusão

A página de Problemas é o seu centro de controle para gerenciar todos os problemas de acessibilidade no seu site. Ela ajuda você a entender o que corrigir, onde intervir e como verificar correções. Use filtros para encontrar problemas específicos, sempre comece com os críticos e sempre verifique suas correções com novas análises.