Acessibilidade Web na Prática: Roles ARIA e Guia de Conformidade WCAG 2.2

Os Quatro Princípios da WCAG 2.2

A WCAG 2.2 organiza os requisitos de conformidade em torno dos princípios POUR:

Princípio	Significado	Requisito Central	Exemplo
Perceptível	A informação é apresentável	Conteúdo perceptível por todos os usuários	Alt de imagem, legendas, contraste
Operável	A interface é operável	Utilizável por múltiplos métodos de entrada	Navegação por teclado, tempo suficiente, sem piscar
Compreensível	O conteúdo é compreensível	Conteúdo e operação são claros	Navegação consistente, sugestões de erro, ajuda de entrada
Robusto	O conteúdo é compatível	Analisável por tecnologias assistivas	HTML válido, semântica ARIA

Sistema de Roles ARIA

Roles de Estrutura do Documento

<header role="banner">
  <nav role="navigation" aria-label="Main navigation">
    <ul role="menubar">
      <li role="menuitem"><a href="/home">Home</a></li>
      <li role="menuitem" aria-haspopup="true">
        Products
        <ul role="menu">
          <li role="menuitem"><a href="/saas">SaaS</a></li>
          <li role="menuitem"><a href="/api">API</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>
<main role="main">
  <article role="article">
    <h2>Article Title</h2>
    <p>Content body</p>
  </article>
</main>
<footer role="contentinfo">Copyright info</footer>

Role	Propósito	Propriedades Obrigatórias	Interação Chave
`button`	Gatilho clicável	Nenhuma	Enter/Espaço ativa
`checkbox`	Marcado/desmarcado	`aria-checked`	Espaço alterna
`radio`	Opção única	`aria-checked`	Setas alternam
`slider`	Valor de intervalo	`aria-valuenow`, `aria-valuemin`, `aria-valuemax`	Setas ajustam
`tablist` / `tab`	Painéis de abas	`aria-selected`	Setas alternam
`dialog`	Modal/não modal	`aria-modal`	Esc fecha
`combobox`	Entrada selecionável	`aria-expanded`	Seta selecionar/filtro de digitação
`tree` / `treeitem`	Estrutura de árvore	`aria-expanded`	Seta expandir/recolher

Propriedades e Estados ARIA

Referência Rápida de Propriedades Core

<!-- Labels and descriptions -->
<button aria-label="Close dialog">✕</button>
<input aria-labelledby="name-label" aria-describedby="name-hint">
<span id="name-label">Username</span>
<span id="name-hint">6-20 characters</span>

<!-- States -->
<div aria-expanded="true" aria-selected="false" aria-checked="mixed">
<div aria-hidden="true" aria-disabled="true" aria-busy="true">

<!-- Relationships -->
<div aria-owns="child-id" aria-controls="panel-id" aria-flowto="next-section">

<!-- Live regions -->
<div role="alert" aria-live="assertive">Error message</div>
<div aria-live="polite" aria-atomic="true" aria-relevant="additions text">Status update</div>

Primeira Regra: Não Exagere no Uso de ARIA

Se um elemento HTML nativo já fornece a semântica e a interação necessárias, não reimplemente com ARIA.

<!-- ❌ Anti-pattern -->
<div role="button" tabindex="0" onclick="submit()">Submit</div>

<!-- ✅ Correct -->
<button type="submit">Submit</button>

<div class="modal-overlay" id="modalOverlay" hidden>
  <div
    role="dialog"
    aria-modal="true"
    aria-labelledby="modalTitle"
    aria-describedby="modalDesc"
    class="modal"
  >
    <h2 id="modalTitle">Confirm Deletion</h2>
    <p id="modalDesc">This action cannot be undone. Are you sure you want to delete this record?</p>
    <div class="modal-actions">
      <button class="btn-cancel">Cancel</button>
      <button class="btn-confirm">Confirm Delete</button>
    </div>
  </div>
</div>

class AccessibleModal {
  constructor(dialogEl) {
    this.dialog = dialogEl;
    this.previousFocus = null;
  }

  open() {
    this.previousFocus = document.activeElement;
    this.dialog.hidden = false;
    const firstFocusable = this.dialog.querySelector(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    firstFocusable?.focus();
    document.addEventListener('keydown', this.handleKeydown);
  }

  close() {
    this.dialog.hidden = true;
    this.previousFocus?.focus();
    document.removeEventListener('keydown', this.handleKeydown);
  }

  handleKeydown = (e) => {
    if (e.key === 'Escape') this.close();
    if (e.key === 'Tab') this.trapFocus(e);
  };

  trapFocus(e) {
    const focusable = [...this.dialog.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    )];
    const first = focusable[0];
    const last = focusable[focusable.length - 1];
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first.focus();
    }
  }
}

Prática: Abas Acessíveis

<div class="tabs">
  <div role="tablist" aria-label="Account settings">
    <button
      role="tab"
      id="tab-profile"
      aria-selected="true"
      aria-controls="panel-profile"
      tabindex="0"
    >Profile</button>
    <button
      role="tab"
      id="tab-security"
      aria-selected="false"
      aria-controls="panel-security"
      tabindex="-1"
    >Security</button>
    <button
      role="tab"
      id="tab-notify"
      aria-selected="false"
      aria-controls="panel-notify"
      tabindex="-1"
    >Notifications</button>
  </div>

  <div role="tabpanel" id="panel-profile" aria-labelledby="tab-profile">
    <p>Profile settings content</p>
  </div>
  <div role="tabpanel" id="panel-security" aria-labelledby="tab-security" hidden>
    <p>Security settings content</p>
  </div>
  <div role="tabpanel" id="panel-notify" aria-labelledby="tab-notify" hidden>
    <p>Notification preferences content</p>
  </div>
</div>

document.querySelector('[role="tablist"]').addEventListener('keydown', (e) => {
  const tabs = [...e.currentTarget.querySelectorAll('[role="tab"]')];
  const idx = tabs.indexOf(document.activeElement);
  let nextIdx;

  if (e.key === 'ArrowRight') nextIdx = (idx + 1) % tabs.length;
  else if (e.key === 'ArrowLeft') nextIdx = (idx - 1 + tabs.length) % tabs.length;
  else if (e.key === 'Home') nextIdx = 0;
  else if (e.key === 'End') nextIdx = tabs.length - 1;
  else return;

  e.preventDefault();
  tabs.forEach((t) => { t.setAttribute('aria-selected', 'false'); t.tabIndex = -1; });
  tabs[nextIdx].setAttribute('aria-selected', 'true');
  tabs[nextIdx].tabIndex = 0;
  tabs[nextIdx].focus();
});

Prática: Formulário Acessível

<form aria-label="User registration">
  <div class="field">
    <label for="email">Email address <span aria-hidden="true">*</span></label>
    <input
      id="email"
      type="email"
      required
      aria-required="true"
      autocomplete="email"
      aria-invalid="false"
      aria-describedby="email-error"
    >
    <span id="email-error" role="alert" aria-live="assertive"></span>
  </div>

  <div class="field">
    <label for="password">Password</label>
    <input
      id="password"
      type="password"
      minlength="8"
      aria-describedby="pwd-rules pwd-strength"
    >
    <span id="pwd-rules">At least 8 characters, including uppercase, lowercase, and digits</span>
    <span id="pwd-strength" aria-live="polite"></span>
  </div>

  <fieldset>
    <legend>Notification method</legend>
    <label><input type="checkbox" name="notify" value="email"> Email</label>
    <label><input type="checkbox" name="notify" value="sms"> SMS</label>
  </fieldset>

  <button type="submit">Register</button>
</form>

Comparação de Ferramentas de Teste Automatizadas

Ferramenta	Tipo	Cobertura WCAG	Integração	Característica
axe-core	Biblioteca em tempo de execução	A/AA	CI + Navegador	A mais abrangente, zero falsos positivos
Lighthouse	Ferramenta de auditoria	A	CLI / DevTools	Desempenho combinado + a11y
WAVE	Extensão de navegador	A/AA	Manual	Anotações visuais
NVDA	Leitor de tela	—	Manual	Experiência real do usuário
Playwright a11y	Teste E2E	A	CI	Integrada com o fluxo de testes

import { test } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('accessibility check', async ({ page }) => {
  await page.goto('/register');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
    .analyze();
  expect(results.violations).toEqual([]);
});

Novos Critérios da WCAG 2.2

Novo Critério	Nível	Descrição
2.4.11 Aparência do Foco	AAA	Área do indicador de foco ≥ 2px, contraste ≥ 3:1
2.4.12 Foco Não Obscurecido	AAA	Elemento focado não obscurecido por outro conteúdo
3.2.6 Ajuda Consistente	A	Localização do mecanismo de ajuda consistente entre páginas
3.3.7 Entrada Redundante	A	Não exigir reinserção de informações fornecidas anteriormente
3.3.8 Autenticação Acessível	AA	A autenticação não depende de testes de função cognitiva

Resumo das Melhores Práticas

Elementos nativos primeiro: Use <button>, <input> etc. em vez de reimplementação com ARIA
Gerenciamento de foco: Foque proativamente na posição lógica após mudanças de modal/rota
Regiões dinâmicas com cuidado: Use aria-live="assertive" apenas para notificações críticas
Automatizado + manual: axe-core cobre ~30-40% dos problemas; testes com leitor de tela são essenciais
Integração contínua: Inclua verificações de acessibilidade no pipeline de CI para prevenir regressões

Os Quatro Princípios da WCAG 2.2

Sistema de Roles ARIA

Roles de Estrutura do Documento

Roles de Widget

Propriedades e Estados ARIA

Referência Rápida de Propriedades Core

Primeira Regra: Não Exagere no Uso de ARIA

Prática: Modal Acessível

Prática: Abas Acessíveis

Prática: Formulário Acessível

Comparação de Ferramentas de Teste Automatizadas

Novos Critérios da WCAG 2.2

Resumo das Melhores Práticas