Um botão de compra pode parecer perfeito e ainda não ter um nome acessível compreensível. Um formulário pode exibir todos os campos obrigatórios e deixar as pessoas adivinhando o que preencher. O que importa é conseguir concluir a tarefa, não a cor de uma pontuação.
Audite uma página sua ou que você tenha autorização para examinar e mantenha o relatório ao lado do navegador. A análise estática e o teste da jornada produzem evidências diferentes. Uma lista curta ou uma nota verde não demonstra conformidade completa com as WCAG.
Escopo desta auditoria
O que pode ser medido
- HTML estático de uma página solicitada, com sinais sobre rótulos, nomes, alternativas textuais e estrutura.
- Alguns padrões de marcação relacionados a foco, formulários, quadros, tabelas e mídia.
- Determinados pares explícitos de cores de texto e fundo em estilos inline.
O que ela não comprova
- Sem execução completa de jornadas interativas ou teste com leitor de tela.
- Sem avaliação abrangente das cores CSS calculadas e de todos os estados visuais.
- Sem certificação WCAG ou comprovação de conformidade jurídica.
O módulo de acessibilidade está disponível nos planos Starter, Professional e Enterprise; não faz parte do Free. As verificações manuais podem ser realizadas independentemente da assinatura.
Comece por uma tarefa importante
Escolha uma jornada concreta: solicitar um orçamento, criar uma conta, ler uma especificação ou entrar em contato com o suporte. Registre a URL exata, o idioma e o resultado esperado. Informe também se a página é pública ou exige autenticação. A auditoria de uma página pública não valida o fluxo de um usuário conectado.
Comece com uma página representativa e examine separadamente os demais modelos. Um defeito na navegação compartilhada pode atingir muitas páginas; uma página inicial sem alertas diz pouco sobre um formulário de compra ou uma janela modal. Priorize os obstáculos que impedem uma tarefa antes de ajustes cosméticos. A gravidade de um resultado depende do contexto de uso e de suas consequências reais.
Entenda o que foi medido
O mecanismo atual da Sitelemetry examina o HTML estático de uma página. Entre outros padrões, procura imagens sem alternativa, ausência de título ou idioma, campos possivelmente sem rótulo, links e botões sem nome, problemas na sequência de títulos, ausência de região principal, valores positivos de tabindex e IDs duplicados. Várias verificações são heurísticas que precisam de confirmação.
Também examina alguns pares de cores inline. Isso não equivale a uma avaliação completa de contraste: CSS herdado, imagens de fundo, sobreposições e estados interativos podem ficar de fora. Falha de acesso, página de verificação, conteúdo truncado ou não HTML deixam a avaliação indisponível ou não aplicável, não aprovada como acessível. As orientações do W3C para selecionar ferramentas explicam por que o julgamento humano continua necessário.
Leia a evidência antes de distribuir o trabalho
Uma tarefa útil informa a URL, o elemento ou exemplo afetado, o comportamento a verificar e a jornada que pode estar bloqueada. “Três imagens sem alt” é mais concreto que “melhorar a acessibilidade”. Porém, a presença de texto alternativo não comprova que ele descreva adequadamente a função da imagem.
Confirme os resultados ambíguos no navegador. Um padrão estático pode deixar passar um rótulo que envolve o campo ou aceitar um aria-labelledby que aponta para um elemento inexistente. Confira o nome realmente calculado na árvore de acessibilidade. Um alerta sobre a sequência de títulos também pede leitura do conteúdo, não um veredito geral sobre as WCAG. Agrupe problemas recorrentes pelo componente compartilhado em vez de corrigir cada página isoladamente.
| Observação | Prioridade no contexto | Evidência a confirmar | Próxima ação |
|---|---|---|---|
| Campo obrigatório sem nome utilizável | Alta se bloquear uma tarefa importante | Inspecionar o nome calculado e preencher o formulário | Corrigir a associação do rótulo e repetir a jornada |
| Imagem sem alternativa | Depende da finalidade | Determinar se informa, executa uma ação ou decora | Escrever alternativa adequada ou usar alt vazio se decorativa |
| Alerta na sequência de títulos | Revisar no contexto | Ler estrutura e conteúdo do documento | Corrigir a estrutura compartilhada se prejudicar a compreensão |
Corrija o componente de origem
Prefira controles HTML nativos com rótulos visíveis. Em uma associação explícita, for deve apontar para o ID correto do campo. Um texto de exemplo desaparece durante a digitação e não substitui um rótulo confiável. O guia do W3C sobre rótulos de formulários apresenta associações adequadas. Em um botão que só tem ícone, dê um nome que explique a ação, como abrir a busca, e não apenas o desenho.
Decida a alternativa da imagem conforme sua finalidade: informar, acionar algo ou decorar. Uma imagem funcional exige uma alternativa apropriada; uma imagem puramente decorativa pode usar alternativa vazia. Não esvazie todos os textos apenas para eliminar alertas. Consulte os tutoriais do W3C sobre imagens e corrija o componente ou modelo de conteúdo para evitar a repetição do problema.
Complete a revisão no navegador
- Alcance e acione os controles somente com o teclado. Verifique foco visível, ordem de navegação e possibilidade de sair dos diálogos.
- Com um leitor de tela, examine títulos, nomes, instruções e erros. Entender a tarefa é mais importante do que simplesmente ouvir algum texto.
- Meça os contrastes relevantes nos estados normal, sob o ponteiro, em foco e de erro, além de imagens ou sobreposições.
- Teste ampliação e janelas estreitas. Procure controles que desaparecem e rolagem impraticável.
Essas são verificações complementares, não capacidades atribuídas à análise estática. As verificações iniciais do W3C oferecem um ponto de partida. Conforme a importância do serviço, inclua pessoas com diferentes necessidades de acesso.
Teste novamente e documente o que falta
Após a alteração, execute a auditoria na mesma URL e compare a evidência específica. O componente compartilhado foi corrigido? Surgiram novos problemas de nome ou estrutura? Repita também a jornada manual original. O desaparecimento de um alerta, quando o diálogo continua impossível de usar pelo teclado, não significa correção concluída.
Registre data, página, alterações e, separadamente, os resultados estáticos e manuais. Em relatórios para clientes, informe quais modelos e interações foram examinados e quais ficaram fora do escopo. A pontuação não é uma porcentagem de usuários bem-sucedidos nem uma comprovação jurídica. Mantenha os testes manuais pendentes visíveis e inclua as jornadas críticas nas verificações das próximas publicações.
Perguntas frequentes
Uma pontuação alta comprova conformidade com as WCAG?
Não. Ela reflete os padrões examinados dentro do escopo informado. Interações, conteúdo e outros requisitos exigem avaliação adicional, manual e especializada.
Toda imagem precisa de texto alternativo descritivo?
Depende da finalidade e do contexto. Imagens informativas ou funcionais precisam de alternativas adequadas; uma alternativa vazia pode ser correta para imagens puramente decorativas.
A auditoria pode confirmar que um diálogo é utilizável?
Ela pode encontrar sinais na marcação disponível, mas não abre o diálogo nem comprova navegação por teclado, gerenciamento de foco ou compreensão com leitor de tela.
Fontes e leituras
- W3C: selecionar ferramentas de avaliaçãowww.w3.org
- W3C: rótulos de campos de formuláriowww.w3.org
- W3C: imagens e alternativas textuaiswww.w3.org
- W3C: verificações iniciais de acessibilidadewww.w3.org
Preparado pela equipe Sitelemetry e conferido com o escopo do produto e as fontes primárias citadas. Os exemplos são ilustrativos, salvo quando um caso observado é identificado.
