ARIA Roles

HTML / CSS 🟡 Mid

Definition

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>.
#core#interview#accessibility