ARIA Roles
HTML / CSS 🟡 MidDefinition
Attributs WAI-ARIA qui définissent le rôle d'un élément pour les technologies d'assistance. Ils complètent ou remplacent la sémantique native quand le HTML seul ne suffit pas.
Analogie
Comme un badge nominatif qui précise la fonction de quelqu'un dans une équipe, même si son titre officiel est différent.
Exemple de code
<div role="alert">Erreur de saisie</div>
<div role="tablist">
<button role="tab" aria-selected="true">Tab 1</button>
<div role="tabpanel">Contenu</div>
</div>
Cas d'usage
Quand un composant custom (onglets, modal, menu) ne peut pas utiliser d'éléments HTML natifs.
Anti-pattern
Ajouter role='button' sur un <div> au lieu d'utiliser un vrai <button>.