Accessibility Testing: Garantindo Inclusão e Conformidade WCAG

O Que é Acessibilidade?

Acessibilidade web garante que pessoas com deficiências podem usar websites. No Brasil, a Lei Brasileira de Inclusão (Lei 13.146/2015) exige acessibilidade em sites públicos e de empresas.

Por Que Importa?

• Inclusão: 15{6727d158e4474b0847515bd23a8ee4bebd5f1aac7a18bc968e51d8985dccb442} da população tem algum tipo de deficiência
1. Legal: Conformidade com LGPD e leis
2. SEO: Sites acessíveis rankeiam melhor
3. UX: Boas práticas beneficiam todos

---

WCAG 2.1 – 4 Princípios

1. Perceivable (Perceptível)

  .text {
    color: #1a1a1a;        / Pior: #767676 = 4.5:1 em fundo branco /
    background: #ffffff;   / Melhor: #1a1a1a = 21:1 em fundo branco /
  }

2. Operable (Operável)

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



:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

3. Understandable (Compreensível)

Email

Formato: usuario@dominio.com



  Senha deve ter:
  

    
Mínimo 8 caracteres

    
Pelo menos 1 número

  

4. Robust (Robusto)

---

ARIA – Accessible Rich Internet Applications

Roles

Estados e Propriedades

Notificação

Erro

---

Testes Automatizados

axe-core

// Playwright + axe
const { test, expect } = require('@playwright/test');
const AxeBuilder = require('@axe-core/playwright').default;

test('accessibility on login page', async ({ page }) => {
  await page.goto('/login');

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

// Log violations
  if (accessibilityScanResults.violations.length > 0) {
    console.log('Violations found:');
    accessibilityScanResults.violations.forEach(v => {
      console.log(  - ${v.id}: ${v.description});
    });
  }

// Fail if critical violations
  const critical = accessibilityScanResults.violations.filter(
    v => v.impact === 'critical'
  );
  expect(critical.length, ${critical.length} critical violations).toBe(0);
});

# pytest + axe
import pytest
from playwright.sync_api import Page

def test_accessibility(page: Page):
    page.goto('/login')

results = page.run_axe()

critical_violations = [
        v for v in results['violations']
        if v['impact'] in ['critical', 'serious']
    ]

assert len(critical_violations) == 0, (
        f"Found {len(critical_violations)} critical accessibility violations"
    )

Lighthouse CI

# .github/workflows/a11y.yml
name: Accessibility Tests

on: [push, pull_request]

jobs:
  accessibility:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

- name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: |
            https://example.com/
            https://example.com/login
          budgetPath: ./lighthouse-budget.json
          uploadArtifacts: true
          temporaryPublicStorage: true

# lighthouse-budget.json
{
  "ci": {
    "collect": {
      "startServerCommand": "npm run start",
      "url": [
        "http://localhost:8080/"
      ]
    },
    "assert": {
      "assertions": {
        "categories:accessibility": ["error", {"minScore": 0.9}]
      }
    }
  }
}

---

Testes Manuais

Checklist de Testes Manuais

# Accessibility Testing Checklist

Navegação por Teclado
[ ] Tab percorre todos os elementos interativos
[ ] ordem de foco faz sentido
[ ] Focus é sempre visível
[ ] Links úteis no topo (skip link)
[ ] ESC fecha modais
[ ] Enter ativa botões e links

Imagens
[ ] Todas imagens têm alt text
[ ] Alt text descreve conteúdo/função
[ ] Imagens decorativas têm alt=""
[ ] Textos em imagens evitados

Contrastes
[ ] Texto normal: 4.5:1 mínimo
[ ] Texto grande (18pt+): 3:1 mínimo
[ ] Gráficos: 3:1

Formulários
[ ] Labels associados a inputs
[ ] Erros descritos claramente
[ ] Campos obrigatórios marcados
[ ] Autocomplete quando aplicável

Semântica
[ ] Cabeçalhos em ordem (h1 > h2 > h3)
[ ] Listas usam 
/

[ ] Tabelas têm headers
[ ] Landmarks definidos

ARIA
[ ] ARIA usado quando HTML não é suficiente
[ ] ARIA não sobrepõe semântica nativa
[ ] Live regions atualizam corretamente

Screen Reader Testing

# Screen Reader Testing

VoiceOver (macOS)
Cmd + F5: Ativar VoiceOver
Tab/Cmd + Option + Setas: Navegar
Cmd + Option + U: Rotor

NVDA (Windows)
Insert + D: Ler documento
Tab: Próximo elemento
Insert + Espaço: Modo foco

Verificar:
[ ] Ordem de leitura faz sentido
[ ] Imagens descritas
[ ] Links têm contexto
[ ] Formulários etiquetados
[ ] Tabelas fazem sentido
[ ] Headings navegáveis