Acessibilidade
WCAG
UX
Design
Frontend

Design de Interfaces Acessíveis: Conformidade com WCAG

A acessibilidade digital não é apenas uma obrigação legal, mas um direito fundamental. Vamos explorar como criar interfaces que atendam às diretrizes WCAG e sejam verdadeiramente inclusivas.

O que é WCAG?

As Web Content Accessibility Guidelines (WCAG) são um conjunto de recomendações para tornar o conteúdo web mais acessível. Elas são organizadas em três níveis:

  • A: Requisitos básicos
  • AA: Requisitos intermediários
  • AAA: Requisitos avançados

Princípios Fundamentais

1. Perceptível

<!-- Exemplo de imagem acessível -->
<img 
  src="grafico-vendas.jpg" 
  alt="Gráfico de vendas do último trimestre mostrando crescimento de 25%"
  role="img"
  aria-labelledby="grafico-descricao"
/>

<div id="grafico-descricao" class="sr-only">
  Gráfico de barras mostrando vendas de janeiro a março.
  Janeiro: R$ 50.000, Fevereiro: R$ 65.000, Março: R$ 75.000.
</div>

2. Operável

<!-- Exemplo de navegação por teclado -->
<nav role="navigation" aria-label="Menu principal">
  <ul>
    <li><a href="#home" tabindex="0">Home</a></li>
    <li><a href="#produtos" tabindex="0">Produtos</a></li>
    <li><a href="#contato" tabindex="0">Contato</a></li>
  </ul>
</nav>

<!-- Exemplo de botão acessível -->
<button 
  class="btn-primary"
  aria-label="Adicionar ao carrinho"
  role="button"
  tabindex="0"
>
  <span class="icon">🛒</span>
  <span class="text">Adicionar</span>
</button>

Implementação Prática

1. Estrutura Semântica

<!-- Estrutura básica acessível -->
<header role="banner">
  <nav role="navigation" aria-label="Menu principal">
    <!-- Navegação -->
  </nav>
</header>

<main role="main">
  <article>
    <h1>Conteúdo Principal</h1>
    <!-- Conteúdo -->
  </article>
</main>

<aside role="complementary">
  <!-- Conteúdo complementar -->
</aside>

<footer role="contentinfo">
  <!-- Rodapé -->
</footer>

2. Formulários Acessíveis

<form role="form" aria-labelledby="form-title">
  <h2 id="form-title">Cadastro de Usuário</h2>
  
  <div class="form-group">
    <label for="nome" id="nome-label">Nome completo</label>
    <input 
      type="text" 
      id="nome" 
      name="nome"
      aria-labelledby="nome-label"
      aria-required="true"
      required
    />
    <div class="error-message" role="alert" aria-live="polite"></div>
  </div>
  
  <button 
    type="submit"
    aria-label="Enviar formulário de cadastro"
  >
    Cadastrar
  </button>
</form>

Estilos e CSS

1. Contraste e Cores

/* Exemplo de variáveis CSS para acessibilidade */
:root {
  /* Cores principais com contraste adequado */
  --primary-color: #0056b3;
  --primary-text: #ffffff;
  
  /* Cores de erro e sucesso */
  --error-color: #dc3545;
  --success-color: #28a745;
  
  /* Tamanhos de fonte */
  --base-font-size: 16px;
  --heading-scale: 1.25;
}

/* Exemplo de foco visível */
:focus {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

/* Exemplo de texto alternativo */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

2. Responsividade

/* Exemplo de media queries para acessibilidade */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
  }
}

JavaScript e Interatividade

1. Gerenciamento de Foco

class FocusManager {
  private focusableElements: HTMLElement[];
  private modal: HTMLElement;
  
  constructor(modal: HTMLElement) {
    this.modal = modal;
    this.focusableElements = this.getFocusableElements();
  }
  
  private getFocusableElements(): HTMLElement[] {
    return Array.from(
      this.modal.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      )
    );
  }
  
  trapFocus(): void {
    this.modal.addEventListener('keydown', (e: KeyboardEvent) => {
      if (e.key === 'Tab') {
        const firstElement = this.focusableElements[0];
        const lastElement = this.focusableElements[this.focusableElements.length - 1];
        
        if (e.shiftKey && document.activeElement === firstElement) {
          lastElement.focus();
          e.preventDefault();
        } else if (!e.shiftKey && document.activeElement === lastElement) {
          firstElement.focus();
          e.preventDefault();
        }
      }
    });
  }
}

2. Notificações Acessíveis

class AccessibleNotification {
  private container: HTMLElement;
  
  constructor() {
    this.container = document.createElement('div');
    this.container.setAttribute('role', 'alert');
    this.container.setAttribute('aria-live', 'polite');
    document.body.appendChild(this.container);
  }
  
  show(message: string, type: 'success' | 'error' | 'info'): void {
    this.container.textContent = message;
    this.container.className = `notification ${type}`;
    
    // Anuncia para leitores de tela
    this.container.setAttribute('aria-label', message);
  }
}

Testes de Acessibilidade

1. Ferramentas Automatizadas

// Exemplo de configuração do axe-core
axe.configure({
  rules: [
    {
      id: 'color-contrast',
      enabled: true
    },
    {
      id: 'heading-order',
      enabled: true
    }
  ]
});

// Execução do teste
axe.run(document.body, {
  resultTypes: ['violations', 'incomplete']
}).then(results => {
  console.log(results.violations);
});

2. Checklist Manual

Navegação

  • Todos os links têm texto descritivo
  • A navegação por teclado funciona
  • O foco é visível
  • A ordem de tabulação é lógica

Imagens

  • Todas as imagens têm alt text
  • Imagens decorativas são marcadas como tal
  • Gráficos têm descrições textuais

Formulários

  • Todos os campos têm labels
  • Mensagens de erro são claras
  • Campos obrigatórios são marcados

Melhores Práticas

1. Do's ✅

  • Use HTML semântico
  • Mantenha contraste adequado
  • Forneça alternativas textuais
  • Teste com leitores de tela
  • Documente padrões de acessibilidade

2. Don'ts ❌

  • Não use apenas cor para transmitir informação
  • Evite conteúdo que pisca
  • Não dependa apenas de mouse
  • Não ignore o foco do teclado
  • Não use tabelas para layout

Ferramentas Recomendadas

1. Testes

  • 🧪 axe-core: Testes automatizados
  • 👁️ WAVE: Avaliação visual
  • 🎯 Lighthouse: Auditoria completa

2. Desenvolvimento

  • 🎨 Color Contrast Checker
  • 🎮 Keyboard Navigation Tester
  • 📝 Screen Reader Testing Tools

Conclusão

A acessibilidade web é essencial para:

  1. Inclusão digital
  2. Conformidade legal
  3. Melhor experiência para todos
  4. SEO otimizado
  5. Código mais limpo

Próximos Passos

  1. Audite seu site atual
  2. Implemente correções prioritárias
  3. Estabeleça padrões de acessibilidade
  4. Treine o time
  5. Mantenha monitoramento contínuo

Quer compartilhar suas experiências com acessibilidade web? Deixe um comentário abaixo!

Leia também

GitHub
LinkedIn
X
youtube
Design de Interfaces Acessíveis: Conformidade com WCAG | Matheus Breguêz