Conception d’interface accessible : conformité WCAG

L'accessibilité numérique n'est pas seulement une obligation légale, mais un droit fondamental. Explorons comment créer des interfaces qui répondent aux directives WCAG et sont véritablement inclusives.

Qu'est-ce que les WCAG ?

Les directives pour l'accessibilité du contenu Web (WCAG) sont un ensemble de recommandations visant à rendre le contenu Web plus accessible. Ils sont organisés en trois niveaux :

A : Exigences de base
AA : Exigences intermédiaires
AAA : exigences avancées

Principes fondamentaux

1. Remarquable

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

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

Mise en œuvre pratique

1. Structure sémantique

<!-- 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. Formulaires accessibles

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

1. Contraste et couleurs

/* 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. Réactivité

/* 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 et interactivité

1. Gestion de la concentration

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

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

Tests d'accessibilité

1. Outils automatisés

// 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. Liste de contrôle manuelle

Navigation

Tous les liens ont un texte descriptif
La navigation au clavier fonctionne
La mise au point est visible
L'ordre des tabulations est logique

Photos

Toutes les images ont un texte alternatif
Les images décoratives sont marquées comme telles
Les graphiques ont des descriptions textuelles

Formulaires

Tous les champs ont des étiquettes
Les messages d'erreur sont clairs
Les champs obligatoires sont marqués

## meilleures pratiques

1. À faire ✅

Utiliser du HTML sémantique
Maintenir un contraste adéquat
Fournir des alternatives textuelles
Test avec des lecteurs d'écran
Documenter les normes d'accessibilité

2. À ne pas faire ❌

Ne vous contentez pas d'utiliser la couleur pour transmettre des informations
Évitez de flasher le contenu
Ne comptez pas uniquement sur la souris
N'ignorez pas le focus du clavier
Ne pas utiliser de tableaux pour la mise en page

Outils recommandés

1. Essais

🧪 axe-core : Tests automatisés
👁️ WAVE : Évaluation visuelle
🎯 Phare : Audit complet

2. Développement

🎨 Vérificateur de contraste de couleur
🎮 Testeur de navigation au clavier
📝 Outils de test des lecteurs d'écran

Conclusion

L'accessibilité du Web est essentielle pour :

Inclusion numérique
Conformité légale
Meilleure expérience pour tout le monde
Référencement optimisé
Code de nettoyage

Prochaines étapes

Auditez votre site Web actuel
Implémenter les correctifs prioritaires
Établir des normes d'accessibilité
Former l'équipe
Maintenir une surveillance continue

Envie de partager vos expériences avec accessibilité web ? Laissez un commentaire ci-dessous !