Verificador de Acessibilidade
Analise trechos de HTML em busca de problemas comuns de acessibilidade WCAG com sugestões práticas de correção
Entrada HTML
O Que Verificamos
Texto Alternativo de Imagem
Verifica se todos os elementos <img> possuem o atributo alt para que os leitores de tela possam descrever as imagens aos usuários.
Rótulos de Formulário
Confirma se todos os campos de formulário possuem rótulos associados via <label for>, aria-label ou aria-labelledby.
Hierarquia de Títulos
Garante que os títulos sigam uma ordem lógica (h1, h2, h3...) sem pular níveis.
Texto de Link
Detecta links vazios e textos genéricos como 'clique aqui' que não são significativos para usuários de leitores de tela.
Atributo de Idioma
Verifica se o atributo lang está presente no elemento <html>, ajudando os leitores de tela a utilizar a pronúncia correta.
ARIA e Elementos Interativos
Confirma se os elementos interativos possuem funções e rótulos ARIA adequados para suporte a tecnologias assistivas.
Verificador de Acessibilidade
Analise trechos de HTML em busca de problemas comuns de acessibilidade WCAG com sugestões práticas de correção
Recursos
- Parse pasted HTML locally with DOMParser and check for common WCAG issues
- 12+ rule categories: alt text, form labels, heading hierarchy, empty links, ARIA usage, tabindex misuse, autoplay
- No network calls — paste HTML, get instant feedback
- NOT a full WCAG audit — for that use axe-core, Lighthouse, or a dedicated tool
- Useful for quick sanity-checks during development
Como usar
- Cole seu código HTML na área de entrada ou carregue um dos trechos de exemplo para ver a ferramenta em ação.
- Clique em 'Verificar Acessibilidade' para analisar seu HTML em busca de problemas comuns do WCAG com base em mais de 12 regras de acessibilidade.
- Revise os resultados agrupados por gravidade, leia as sugestões de correção e atualize seu HTML para resolver os problemas encontrados.
Dicas e Melhores Práticas
- Paste the HTML source (View Source / Inspect → Outer HTML) — the checker doesn't fetch URLs (CORS would block that anyway).
- For a complete audit, use axe-core in your test suite or Lighthouse in DevTools — those check ~30 more rules including dynamic ones.
- Heading hierarchy: each level should follow the previous (h1 → h2 → h3); skipping levels is flagged.
- Alt text rule allows `alt=""` for purely decorative images — only missing/duplicate alt is flagged.
- Form labels: every input should have an associated label (via `for` attribute) or `aria-label`. Placeholder-only is flagged.
Perguntas Frequentes
Quais problemas de acessibilidade esta ferramenta verifica?
Esta ferramenta verifica mais de 12 problemas comuns de acessibilidade WCAG, incluindo: atributos alt ausentes em imagens, campos de formulário sem rótulos associados, violações de hierarquia de títulos (níveis pulados), links vazios e textos genéricos de link, atributo lang ausente no elemento HTML, elementos interativos sem funções ou rótulos ARIA, botões vazios, elementos HTML obsoletos, valores positivos de tabindex que quebram a ordem de tabulação, elementos de mídia com autoplay e títulos de documento ausentes. Cada problema é mapeado para critérios de sucesso específicos do WCAG.
Isto substitui uma auditoria completa de WCAG?
Não, esta ferramenta verifica problemas comuns no nível do HTML que podem ser detectados por meio da análise da marcação. Uma auditoria WCAG 2.1 ou 2.2 completa exige testes com tecnologias assistivas reais, como leitores de tela, verificação de contraste de cores, validação da navegação por teclado, testes de atualizações dinâmicas de conteúdo e avaliação de acessibilidade cognitiva. Esta ferramenta é um excelente primeiro passo para detectar os problemas mais comuns antes de realizar uma auditoria manual completa.
Qual é a diferença entre erros e avisos?
Erros indicam violações claras de acessibilidade que certamente afetarão usuários de tecnologias assistivas. Por exemplo, um atributo alt ausente em uma imagem é um erro, pois os leitores de tela não conseguem descrevê-la. Avisos indicam problemas em potencial que podem ou não ser problemáticos dependendo do contexto. Por exemplo, um atributo alt vazio é um aviso, pois é correto para imagens decorativas, mas incorreto para imagens informativas. Aprovações confirmam que uma verificação específica foi atendida.
Posso verificar a URL de um site ao vivo em vez de colar HTML?
Esta ferramenta foi projetada para verificar trechos de HTML colados diretamente. Para testar sites ao vivo, você precisaria visualizar o código-fonte da página ou usar as ferramentas de desenvolvedor do navegador para copiar o HTML e, em seguida, colá-lo aqui. Para testes em sites ao vivo, considere extensões de navegador como axe DevTools ou Lighthouse, que conseguem inspecionar o DOM renderizado, incluindo conteúdo gerado dinamicamente.
Por que o atributo lang no elemento HTML é tão importante?
O atributo lang informa aos leitores de tela e outras tecnologias assistivas em qual idioma o conteúdo está escrito. Sem ele, um leitor de tela pode tentar ler um texto em inglês usando regras de pronúncia do francês, tornando o conteúdo incompreensível. Ele também afeta a forma como os navegadores lidam com hifenização, verificação ortográfica e outros recursos dependentes de idioma. Definir o lang é uma das melhorias de acessibilidade mais simples e de maior impacto que você pode fazer.
Meu código HTML é enviado a algum servidor para análise?
Não, toda a análise acontece inteiramente no seu navegador usando JavaScript. Seu código HTML nunca sai do seu dispositivo. A ferramenta analisa o HTML usando o API DOMParser nativo do navegador e executa todas as verificações de acessibilidade localmente. Isso a torna segura para uso com código proprietário, projetos internos ou qualquer HTML que contenha conteúdo sensível.