Ferramentas de Acessibilidade

Para auxiliar e facilitar o desenvolvimento de soluções acessíveis, apresentamos abaixo cada ferramenta com indicação de uso e instruções práticas de como aplicá-la no dia a dia.

  • Framework de Testes de Acessibilidade (Android)

    Quando usar: Durante o desenvolvimento de apps Android, para testar componentes UI.

    Como usar:

    1. No arquivo build.gradle do módulo, adicione:
      implementation 'com.google.android.apps.common:accessibility-test-framework:2.2.0'
    2. Crie uma classe de teste Android (JUnit) e importe as APIs do framework.
    3. Chame AccessibilityChecks.enable() antes de interagir com elementos no teste.
    4. Execute o teste no emulador ou dispositivo e veja falhas no log.
  • Wave – Web Accessibility Evaluation Tool

    Quando usar: Para avaliação rápida de páginas estáticas ou em desenvolvimento.

    Como usar:

    1. Acesse wave.webaim.org.
    2. No campo de URL, cole o endereço da sua página e clique em “WAVE”.
    3. Observe os ícones coloridos sobrepostos (erro, alerta, estrutura) e clique para detalhes.
    4. Anote os itens críticos (alt ausente, contraste ruim) e corrija no código HTML/CSS.
  • DynoVisual Sitemap Generator

    Quando usar: Para mapear visualmente a estrutura de sites de médio a grande porte.

    Como usar:

    1. Visite dynomapper.com e faça login.
    2. Crie um novo projeto, insira a URL base e defina profundidade de rastreamento.
    3. Inicie a geração do sitemap e aguarde a conclusão.
    4. Exporte o diagrama em PNG ou SVG e use-o para revisar navegação e hierarquia.
  • JAWS – Leitor de Telas (Windows)

    Quando usar: Para testar suporte a leitores de tela em apps desktop e web no Windows.

    Como usar:

    1. Instale o JAWS no Windows e abra o Speech Viewer.
    2. Navegue pela aplicação usando apenas teclado (Tab, setas, Enter).
    3. Verifique se labels de botões, campos e cabeçalhos são anunciados corretamente.
    4. Corrija atributos aria-label ou alt onde necessário.
  • ACHECKS – Caixa de Ferramentas

    Quando usar: Para combinar testes automáticos e inspeções manuais em uma só interface.

    Como usar:

    1. Instale a extensão do AChecks no navegador ou acesse o portal online.
    2. Carregue a página e execute o escaneamento automático.
    3. Use a lista de verificação manual guiada para validar questões semânticas (listas, botões, formulários).
    4. Gere o relatório final e comunique a equipe de front-end.
  • AXE-core – Engine de Testes

    Quando usar: Em pipelines de CI/CD para checagem de acessibilidade em aplicações web.

    Como usar:

    1. Adicione via npm:
      npm install axe-core --save-dev
    2. Nos seus testes automatizados (Jest, Mocha, Cypress), importe e injete o axe no DOM.
    3. Chame axe.run() e avalie o objeto de retorno para falhas.
    4. Faça com que o teste falhe se existirem violações críticas.
  • Lighthouse – Auditoria no Chrome

    Quando usar: Para revisão integrada de performance, SEO e acessibilidade.

    Como usar:

    1. Abra o site no Chrome e pressione F12 para abrir DevTools.
    2. Selecione a aba “Lighthouse”, marque “Accessibility” e clique em “Generate report”.
    3. Analise sugestões de melhoria (ex.: textos alternativos, contraste) na seção “Opportunities”.
  • WebAim Contrast Checker

    Quando usar: Ao escolher paletas de cores para texto e fundo.

    Como usar:

    1. Acesse webaim.org/resources/contrastchecker.
    2. Insira as cores em hexadecimal para texto e background.
    3. Verifique se a razão atende aos níveis AA (≥4.5:1) ou AAA (≥7:1).
    4. Ajuste no design ou CSS conforme necessidade.
  • Ases – Auditoria Brasileira

    Quando usar: Para conformidade com padrões eMAG e ABNT em sites governamentais.

    Como usar:

    1. Acesse o portal Ases e cadastre sua instituição.
    2. Envie a URL para análise e aguarde a geração do relatório.
    3. Revise itens obrigatórios (descrições de imagens, semântica HTML) e corrija.
  • Accessibility Insights

    Quando usar: Em auditorias profundas, com inspeção manual e automática.

    Como usar:

    1. Instale a extensão no Chrome/Edge ou o aplicativo desktop.
    2. Execute o “FastPass” para um relatório rápido.
    3. Siga o guia passo a passo para testar cenários específicos (menus, formulários).
    4. Exporte o relatório em HTML para arquivar evidências.
  • Stark – Plugin de Design

    Quando usar: Na fase de design, dentro de ferramentas como Figma e Sketch.

    Como usar:

    1. No Figma/Sketch, instale o plugin Stark.
    2. Selecione layers de texto ou elementos de UI.
    3. Cheque contraste e visualize simulações de daltonismo.
    4. Faça ajustes no design antes de passar ao desenvolvimento.