ideiasti

Bem vindo ao Blog ideiasti, um blog voltado para Qualidade de Software e Engenharia de Software

Testes de Acessibilidade: WCAG e Inclusão Digital

Testes Automatizados · 6 de julho de 2026

📖 3 min de leitura

Por Que Acessibilidade Importa?

  • 1.3 bilhões de pessoas com deficiência no mundo
    1. Leis como ADA, LGPD, EU Accessibility Act
    2. SEO – Google prioriza sites acessíveis
    3. Reputação – Marca inclusiva
    4. Mercado – P público que você está excluindo

    WCAG 2.1 – Princípios

    4 Princípios (POUR)

    Princípio Descrição
    Perceivable Informações devem ser perceptíveis
    Operable Interface deve ser operável
    Understandable Informações e interface compreensíveis
    Robust Conteúdo deve funcionar com tecnologias assistivas

    Níveis de Conformidade

    Nível Significado Requisito
    A Básico Mínimo, deve atender
    AA Padrão Recomendado, maioria das leis
    AAA Avançado Mais rigoroso, poucos достигают

    Ferramentas Automatizadas

    axe-core

    // Npm
npm install @axe-core/playwright


    // Playwright integration
    const { chromium } = require('playwright');
    const AxeBuilder = require('@axe-core/playwright').default;
    


    async function runAccessibilityTest() {
        const browser = await chromium.launch();
        const page = await browser.newPage();
    


    await page.goto('https://example.com');
    


    const results = await new AxeBuilder({ page })
            .withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
            .analyze();
    


    console.log('Violations:', results.violations.length);
        results.violations.forEach(v => {
            console.log(- ${v.id}: ${v.description});
        });
    


    await browser.close();
    }

    Lighthouse CI

    # GitHub Actions
    1. name: Lighthouse
      2. 

      uses: treosh/lighthouse-ci-action@v10
  with:
    urls: https://example.com
    budgetPath: ./lighthouserc.json
    uploadArtifacts: true

    // lighthouserc.json
{
  "ci": {
    "collect": {
      "settings": {
        "staticDistDir": "./dist"
      }
    },
    "assert": {
      "assertions": {
        "categories:accessibility": ["error", {"minScore": 0.9}],
        "first-contentful-paint": ["warn", { "maxNumericValue": 2000 }],
        "uses-passive-event-listeners": "off"
      }
    }
  }
}

    Testes Manuais

    Checklist de Teclado

    Navegação por Teclado
    


    Essential
    1. [ ] Tab avança logicamente entre elementos
      2. 

    2. [ ] Shift+Tab retorna ao elemento anterior
      3. 

    3. [ ] Enter ativa botões e links
      4. 

    4. [ ] Space ativa botões e checkboxes
      5. 

    5. [ ] Escape fecha modais e dropdowns
      6. 

    6. [ ] Setas navegam em menus
      7. 

    

    Skip Links
    1. [ ] Link "Skip to main content" existe
      2. 

    2. [ ] Link é visível quando focado
      3. 

    3. [ ] Link funciona corretamente
      4. 

    

    Focus Indicators
    1. [ ] Focus é sempre visível
      2. 

    2. [ ] Estilo de focus não é apenas cor
      3. 

    3. [ ] Focus não desaparece em nenhum elemento
      4.

    Checklist de Screen Reader

    Screen Reader Testing
    


    Imagens
    1. [ ] Alt text em todas imagens informativas
      2. 

    2. [ ] Alt text é descritivo e útil
      3. 

    3. [ ] Imagens decorativas têm alt=""
      4. 

    4. [ ] SVG complexos têm descriptions
      5. 

    

    Formulários
    1. [ ] Labels associados corretamente (for/id)
      2. 

    2. [ ] Placeholder não substitui label
      3. 

    3. [ ] Erros anunciados
      4. 

    4. [ ] Required fields marcados
      5. 

    

    Heading Structure
    1. [ ] h1 é único na página
      2. 

    2. [ ] Hierarquia lógica (h1 > h2 > h3)
      3. 

    3. [ ] Sem saltos (h1 > h3, pulando h2)
      4. 

    4. [ ] Headings não são só visuais
      5. 

    

    Links e Botões
    1. [ ] Links fazem sentido fora de contexto
      2. 

    2. [ ] Botões descrevem ação
      3. 

    3. [ ] Links novos/abrem em nova aba avisados

Implementando Acessibilidade

ARIA Basics






<div 
  role="dialog" 
  aria-labelledby="modal-title"
  aria-describedby="modal-desc"
  aria-modal="true"
>








Email inválido

CSS para Acessibilidade

/ Focus visível /
*:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}


/ Esconde visualmente mas mantém para screen readers /
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/ Skip link /
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}



.skip-link:focus {
  top: 0;
}



/ Contraste adequado /
.text-primary {
  color: #1a1a1a; / Não use #777777 com fundo branco /
}



/ Touch target mínimo /
button, a, input[type="checkbox"] {
  min-height: 44px;
  min-width: 44px;
}

Conclusão

Acessibilidade é responsabilidade de todos. As chaves são:

  1. Testar cedo – A11y mais barato no início

  2. Automatizar – axe-core, Lighthouse

  3. Testar manualmente – Teclado, screen reader

  4. Seguir WCAG – 2.1 AA como mínimo

  5. Incluir na cultura – A11y não é “extra”