Accessible Interface Design: WCAG Compliance

Digital accessibility is not just a legal obligation, but a fundamental right. Let's explore how to create interfaces that meet WCAG guidelines and are truly inclusive.

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) are a set of recommendations for making web content more accessible. They are organized into three levels:

• A: Basic requirements
• AA: Intermediate requirements
• AAA: Advanced requirements

Fundamental Principles

1. Noticeable

<!-- 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. Operable

<!-- 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>

Practical Implementation

1. Semantic Structure

<!-- 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. Accessible Forms

<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>

Styles and CSS

1. Contrast and Colors

/* 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. Responsiveness

/* 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 and Interactivity

1. Focus Management

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. Accessible Notifications

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);
  }
}

Accessibility Tests

1. Automated Tools

// 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. Manual Checklist

Navigation

• All links have descriptive text
• Keyboard navigation works
• Focus is visible
• Tab order is logical

Images

• All images have alt text
• Decorative images are marked as such
• Charts have textual descriptions

Forms

• All fields have labels
• Error messages are clear
• Mandatory fields are marked

Best Practices

1. Do's ✅

• Use semantic HTML
• Maintain adequate contrast
• Provide textual alternatives
• Test with screen readers
• Document accessibility standards

2. Don'ts ❌

• Don't just use color to convey information
• Avoid flashing content
• Don't just depend on the mouse
• Don't ignore keyboard focus
• Do not use tables for layout

Recommended Tools

1. Tests

• 🧪 axe-core: Automated tests
• 👁️ WAVE: Visual evaluation
• 🎯 Lighthouse: Complete audit

2. Development

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

Conclusion

Web accessibility is essential for:

1. Digital inclusion
2. Legal Compliance
3. Best experience for everyone
4. Optimized SEO
5. Cleaner code

Next Steps

1. Audit your current website
2. Implement priority fixes
3. Establish accessibility standards
4. Train the team
5. Maintain continuous monitoring

---

Want to share your experiences with accessibility web? Leave a comment below!

Also read

• User-Centered Design: How to Choose to Scale
• Interaction Design: How to Choose with Checklist
• Inclusive Design: How to Choose Essential Steps
• Digital Accessibility UX
• Digital Accessibility UX - Complete Guide to Scaling
• Digital Accessibility UX - Complete Guide for Startups