Rudra Analyzer

Verificador de acessibilidade gratuito

Execute o mecanismo de acessibilidade axe-core na sua página em um navegador real para encontrar barreiras comuns, como campos de formulário sem rótulo, baixo contraste de cores, imagens sem texto alternativo e erros de ARIA, e saiba como corrigi-las.

Digite uma página, por exemplo https://seusite.com.br ou https://seusite.com.br/precos.

O que esta ferramenta verifica

  • Textos alternativos

    Imagens, botões de imagem e outros conteúdos não textuais sem um texto alternativo que um leitor de tela possa ler.

  • Rótulos de formulário

    Campos, caixas de seleção e listas suspensas sem rótulo acessível, de modo que as tecnologias assistivas não conseguem dizer para que servem.

  • Contraste de cores

    Texto com cor próxima demais à do fundo para atender às taxas de contraste WCAG AA.

  • Nomes para links e botões

    Links e botões sem um nome legível, muitas vezes botões só com ícone.

  • ARIA

    Funções e atributos ARIA inválidos, não permitidos naquele elemento ou sem partes obrigatórias.

  • Estrutura da página

    Idioma da página, título da página, regiões de referência (landmarks) e outras regras estruturais das WCAG e das boas práticas do axe-core.

  • Quantos elementos são afetados

    Para cada problema (até 25 tipos), quantos elementos falham e um exemplo de onde encontrar um deles.

Como a verificação funciona

Carregamos sua página no Chromium headless, adicionamos a biblioteca axe-core e executamos o conjunto de regras padrão dela na página já renderizada, então o conteúdo adicionado por JavaScript também é testado. O conjunto padrão cobre as regras WCAG 2.x de nível A e AA, além das boas práticas do axe-core.

Cada regra com falha reduz a pontuação conforme o impacto: 15 pontos para crítico, 10 para sério, 5 para moderado e 2 para leve. A dedução é por regra, não por elemento, então um rótulo ausente e vinte rótulos ausentes custam o mesmo; o problema informa quantos elementos são afetados.

Os testes automáticos encontram apenas parte dos problemas de acessibilidade que uma página pode ter. Muitos precisam do julgamento de uma pessoa: se o texto alternativo é realmente significativo, se a ordem do teclado faz sentido, se o conteúdo é compreensível. Trate esta verificação como um ponto de partida, não como um certificado.

Problemas comuns que encontramos

  • Texto com baixo contraste

    Texto cinza-claro, texto em botões coloridos e texto de exemplo (placeholder) usado no lugar de um rótulo.

  • Imagens sem texto alternativo

    Logotipos, fotos de produtos e imagens usadas como links.

  • Campos de formulário sem rótulos

    Caixas de busca e cadastros de newsletter que dependem apenas do texto de exemplo (placeholder).

  • Botões e links só com ícone

    Ícones de menu, fechar, redes sociais e carrinho sem texto para leitores de tela.

  • Idioma da página ausente

    Sem atributo lang no elemento html, os leitores de tela podem usar a pronúncia errada.

  • ARIA usado de forma incorreta

    Funções nos elementos errados ou referências a IDs que não existem.

Como corrigi-los

  1. Escureça o texto ou clareie o fundo

    Busque uma taxa de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Um verificador de contraste nas ferramentas de desenvolvedor do navegador mostra essa taxa.

  2. Adicione um texto alternativo que diga para que serve a imagem

    Descreva o que importa no contexto: “Baixar a lista de preços” para um link com ícone, e não “ícone”. Use alt="" para imagens puramente decorativas.

  3. Dê um rótulo visível a cada campo

    Use um elemento label vinculado ao campo. Se o design realmente não puder exibir um, use aria-label, mas rótulos visíveis ajudam todo mundo.

  4. Dê nomes aos botões com ícone

    Adicione um texto visualmente oculto ou um aria-label, por exemplo aria-label="Abrir menu".

  5. Prefira HTML nativo a ARIA

    Um elemento button ou link de verdade já é acessível por padrão. Adicione ARIA apenas quando não houver um elemento nativo para a função.

  6. Teste manualmente também

    Tente usar a página apenas com o teclado e com um leitor de tela como NVDA ou VoiceOver para encontrar o que as regras automáticas não encontram.

Perguntas frequentes

Se eu passar nesta verificação, meu site está em conformidade com as WCAG?

Não. Passar significa que as regras automáticas não encontraram problemas. Muitos requisitos das WCAG só podem ser verificados por uma pessoa, então a conformidade também exige uma revisão manual.

Ele testa a navegação por teclado ou leitores de tela?

Não. O axe-core inspeciona o código e os estilos calculados da página. Ele não consegue dizer se a ordem de tabulação faz sentido nem como um leitor de tela realmente anuncia a página; teste isso manualmente.

Qual versão e nível das WCAG ele usa?

O conjunto de regras padrão do axe-core: regras WCAG 2.x nos níveis A e AA, além de regras de boas práticas. As regras de nível AAA não estão incluídas.

Por que corrigir um elemento não mudou minha pontuação?

A pontuação cai uma vez por regra com falha, independentemente do número de elementos. Uma regra só deixa de contar contra você quando todos os elementos que ela sinalizou forem corrigidos.

Ele consegue verificar páginas que exigem login?

Não. Só conseguimos testar páginas que carregam publicamente, sem login.

Guias úteis

Ferramentas gratuitas relacionadas

Prefere que alguém corrija por você?

Estas verificações são gratuitas, assim como os guias. Se preferir que uma pessoa faça as mudanças, nossa equipe oferece ajuda paga.

Ver opções de ajuda profissionalComo testamos e pontuamosTodas as ferramentas gratuitas