aria-label, aria-describedby, role : le guide des attributs ARIA

ARIA : quand l'utiliser ?

ARIA (Accessible Rich Internet Applications) complète le HTML natif pour les composants complexes. La règle d'or : n'utilisez pas ARIA si un élément HTML natif peut faire le travail. Un <button> est toujours préférable à <div role="button">.

Les attributs ARIA les plus utiles

aria-label

Fournit un nom accessible à un élément sans texte visible. Exemple : une icône de fermeture.

<button aria-label="Fermer la modale">✕</button>

aria-describedby

Associe une description supplémentaire à un élément. Utile pour les champs de formulaire avec instructions.

<input aria-describedby="aide-mdp">
<p id="aide-mdp">8 caractères minimum, une majuscule requise.</p>

aria-expanded

Indique si un élément pliable est ouvert ou fermé.

<button aria-expanded="false" aria-controls="menu">Menu</button>

aria-live

Annonce les mises à jour dynamiques aux lecteurs d'écran.

<div aria-live="polite" aria-atomic="true">Formulaire envoyé avec succès.</div>

Les erreurs ARIA courantes

• Utiliser role="presentation" sur un élément interactif
• Oublier de mettre à jour aria-expanded après un clic
• Confondre aria-label et aria-labelledby
• Utiliser ARIA pour masquer des erreurs de sémantique HTML