Aula 19 - Testes de Usabilidade e Acessibilidade (WCAG AA/AAA) ♿

📑 1. Fundamentos Teóricos & Análise Técnica

A Acessibilidade na Web (a11y) assegura que qualquer indivíduo, independentemente de limitações sensoriais, motoras, cognitivas ou situacionais, consiga perceber, compreender, navegar e interagir plenamente com sistemas digitais. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.2) estabelecem quatro princípios basilares conhecidos pelo acrônimo POUR: - Perceptível (Perceivable): As informações e os componentes da interface devem ser apresentados aos usuários de maneiras que eles possam perceber (ex: textos alternativos para imagens, contraste mínimo de 4.5:1 para texto padrão no nível AA e 7:1 no nível AAA). - Operável (Operable): Os componentes e a navegação devem ser operáveis integralmente por teclado, sem armadilhas de foco (keyboard traps) e com tempo suficiente para leitura. - Compreensível (Understandable): A operação deve ser previsível, com rótulos descritivos e prevenção ativa contra erros de preenchimento. - Robusto (Robust): O código HTML deve ser semanticamente válido para interpretação correta por múltiplos agentes de usuário e leitores de tela (NVDA, JAWS, VoiceOver).

📐 Arquitetura Conceitual & Diagrama de Fluxo

flowchart TD
    subgraph WCAG ["Pilares WCAG 2.2 (POUR)"]
        P["1. Perceptível<br>Contraste de Cor, Alt Text, Legendas"]
        O["2. Operável<br>Navegação por Teclado, Skip Links"]
        U["3. Compreensível<br>Labels Claros, Mensagens de Erro"]
        R["4. Robusto<br>HTML Semântico, WAI-ARIA Nativo"]
    end
    P --> Audit["Auditoria Automatizada & Manual"]
    O --> Audit
    U --> Audit
    R --> Audit
    Audit --> Report["Conformidade Nível AA / AAA"]
    style WCAG fill:#fff3e0,stroke:#e65100
    style Audit fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Contraste de Luminância: Relação mínima de 4.5:1 para texto normal e 3:1 para elementos de interface e gráficos (critério 1.4.3). - Gerenciamento de Foco: Ordem de tabulação lógica (tabindex natural) e indicadores de foco visualmente destacados. - Papéis e Atributos ARIA: Uso estrito de ARIA apenas como enriquecimento suplementar onde o HTML5 nativo não é suficiente. - Testes Automatizados e Heurísticos: Combinação de ferramentas no CI (axe-core, Lighthouse) com testes práticos reais com leitores de tela.

🛠️ 2. Implementação Prática em WAI-ARIA e Acessibilidade Web

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// accessible-modal.html (Padrão WAI-ARIA com Gerenciamento de Foco)
<div role="dialog" 
     id="modal-confirm" 
     aria-modal="true" 
     aria-labelledby="modal-title" 
     aria-describedby="modal-desc"
     class="modal-backdrop">
  <div class="modal-content" role="document">
    <h2 id="modal-title" class="modal-heading">Confirmar Exclusão de Registro</h2>
    <p id="modal-desc" class="modal-body">
      Tem certeza de que deseja excluir o projeto selecionado? Esta operação não poderá ser revertida.
    </p>
    <div class="modal-actions">
      <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancelar</button>
      <button type="button" class="btn btn-danger" onclick="confirmDelete()">Excluir Permanentemente</button>
    </div>
  </div>
</div>

💡 Análise Passo a Passo do Código

1. Papel Semântico: role='dialog' e aria-modal='true' informam ao leitor de tela que o conteúdo fora da janela deve ser temporariamente ignorado.
2. Vinculação Semântica: aria-labelledby e aria-describedby associam os textos explicativos diretamente à caixa de diálogo.
3. Confinamento de Foco: Scripts devem implementar o aprisionamento de foco (focus trap) enquanto a modal estiver aberta.

🎯 3. Próximos Passos & Sequência Didática