Parent : [[INDEX-WEB-UIUX]]

Attributs ARIA essentiels pour React

Problème

Sans attributs ARIA, les lecteurs d'écran ne peuvent pas :

• Annoncer les résultats de recherche dynamiques
• Identifier les modals et piéger le focus
• Comprendre les boutons icônes sans texte
• Naviguer les menus déroulants au clavier

Solution

1. Live regions pour contenu dynamique

<div aria-busy={loading} aria-live="polite">
  {/* résultats, skeletons */}
</div>
<div aria-live="assertive" role="alert">
  {error && <p>⚠ {error}</p>}
</div>

2. Modals accessibles

<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Titre</h2>
  <button aria-label="Fermer" onClick={onClose}>✕</button>
</div>

• useEffect pour Escape key :

useEffect(() => {
  const h = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
  document.addEventListener('keydown', h)
  return () => document.removeEventListener('keydown', h)
}, [onClose])

3. Menus déroulants

<button aria-haspopup="true" aria-expanded={open} aria-label="Menu utilisateur">
  <div role="menu">
    <button role="menuitem">Option 1</button>
  </div>
</button>

4. Boutons icônes

<button aria-label="Image précédente">‹</button>
<button aria-label={isFav ? 'Retirer des favoris' : 'Ajouter aux favoris'}>♡</button>

Exemple

Correct

<article aria-busy={loading} aria-live="polite">
  {error && <div role="alert" aria-live="assertive">{error}</div>}
  {results.map(r => <ResultCard key={r.id} data={r} />)}
</article>

Incorrect

<div>
  {error && <div className="error">{error}</div>}
  {results.map(r => <ResultCard key={r.id} data={r} />)}
</div>

Pourquoi ça marche

• aria-live="polite" : annonce les changements sans interrompre
• aria-live="assertive" : interrompt pour les erreurs critiques
• role="dialog" + aria-modal="true" : piège le focus dans la modal
• aria-label : rend les boutons icônes compréhensibles

Quand ne PAS l'utiliser

• Ne pas sur-utiliser aria-live="assertive" (trop d'annonces = spam)
• Ne pas mettre aria-live sur des éléments qui changent trop fréquemment
• Ne pas remplacer les <label> HTML par aria-label sur les inputs

Source

• Projet : ProjectAlpha
• Contexte : Audit accessibilité WCAG 2.1 AA
• Validé le : 2026-05-17