ARIA : guide pratique des rôles et attributs

Ce que fait ARIA, et ce qu’il ne fait pas

ARIA modifie uniquement ce que le navigateur transmet aux technologies d’assistance (l’arbre d’accessibilité). Il ne change ni l’apparence, ni le comportement, ni la navigation au clavier : un role="button" ne rend pas une div cliquable au clavier.

Les cinq règles d’utilisation

Le W3C résume le bon usage d’ARIA en cinq règles.

1. Préférez l’élément HTML natif. Un <button>, un <a href>, un <input type="checkbox"> ou un <dialog> portent déjà leur rôle, leur état et leur comportement au clavier. ARIA ne sert que lorsqu’aucun élément natif ne convient.
2. Ne changez pas la sémantique native sans nécessité. Un titre <h2 role="tab"> perd son rôle de titre. Placez plutôt l’onglet dans le titre : <h2><button role="tab">…</button></h2>.
3. Tout composant ARIA interactif doit fonctionner au clavier. Un role="button" n’ajoute ni le focus ni la réaction aux touches Entrée et Espace : c’est à votre script de les fournir.
4. Ne masquez jamais un élément qui reçoit le focus. role="presentation" ou aria-hidden="true" sur un élément focalisable crée un élément atteignable au clavier mais muet pour le lecteur d’écran.
5. Tout élément interactif doit avoir un nom accessible. Un bouton, un lien ou un champ sans nom est restitué « bouton », « lien » ou « champ de saisie », sans indication de sa fonction.

<div class="btn" role="button" onclick="envoyer()">Envoyer</div>
<!-- Pas atteignable avec Tab, ne réagit ni à Entrée ni à Espace -->

<button type="button" class="btn" onclick="envoyer()">Envoyer</button>

Donner un nom accessible

Le nom accessible est ce que le lecteur d’écran annonce. Il vient d’abord de aria-labelledby (le texte d’un autre élément), puis de aria-label (un texte fourni directement), puis du HTML : le contenu d’un bouton ou d’un lien, l’étiquette <label> d’un champ, l’attribut alt d’une image. aria-describedby ajoute une description, lue après le nom.

Lorsque le composant affiche un texte, son nom accessible doit le reprendre : un bouton affichant « Rechercher » ne doit pas s’appeler « Lancer la requête ».

<button type="button" class="close">
  <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg>
</button>
<!-- Restitué « bouton », sans dire ce qu’il fait -->

<button type="button" class="close" aria-label="Fermer la fenêtre">
  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>
</button>

Masquer correctement avec aria-hidden

aria-hidden="true" retire un élément et tout son contenu de ce que perçoivent les technologies d’assistance, sans le masquer à l’écran. Il sert aux icônes décoratives et aux contenus redondants. Il ne doit jamais contenir un élément qui reçoit le focus, ni masquer une information utile.

<div class="promo" aria-hidden="true">
  <a href="/soldes">Voir les soldes</a>
</div>
<!-- Le lien reçoit le focus mais n’est pas restitué : un « trou » au clavier -->

<a href="/soldes">
  <svg aria-hidden="true" viewBox="0 0 24 24">…</svg>
  Voir les soldes
</a>

Annoncer un changement : les régions live

Un message qui apparaît sans déplacer le focus (« Article ajouté au panier », « 3 résultats ») doit être annoncé. role="status" l’annonce sans interrompre la lecture en cours ; role="alert" l’annonce immédiatement, à réserver aux erreurs et aux urgences. La région doit être présente dans la page avant que son texte ne change.

<script>
  panier.insertAdjacentHTML("beforeend",
    '<p role="status">Article ajouté au panier</p>');
</script>
<!-- Souvent non annoncé : la région n’existait pas avant le changement -->

<p id="panier-statut" role="status"></p>
<script>
  document.getElementById("panier-statut").textContent = "Article ajouté au panier";
</script>

Les composants les plus courants

<button type="button" class="toggle">Nos services</button>
<ul class="submenu" hidden>…</ul>
<!-- Le lecteur d’écran ne sait pas si le menu est ouvert ou fermé -->

<button type="button" aria-expanded="false" aria-controls="services">Nos services</button>
<ul id="services" hidden>…</ul>
<script>
  const bouton = document.querySelector('[aria-controls="services"]');
  bouton.addEventListener("click", () => {
    const ouvert = bouton.getAttribute("aria-expanded") === "true";
    bouton.setAttribute("aria-expanded", String(!ouvert));
    document.getElementById("services").hidden = ouvert;
  });
</script>

Le W3C décrit le rôle, les attributs et le comportement au clavier attendus de chaque composant dans l’ARIA Authoring Practices Guide.

Les erreurs les plus fréquentes

• role="button" sur une div sans tabindex="0" ni gestion des touches Entrée et Espace.
• aria-label sur une div ou un span sans rôle : l’attribut n’y est pas autorisé et les lecteurs d’écran l’ignorent souvent.
• aria-hidden="true" sur un bloc qui contient un lien ou un bouton.
• aria-expanded qui reste à "false" quand le menu est ouvert.
• aria-labelledby ou aria-describedby qui pointent vers un id inexistant.
• Deux zones <nav> sans aria-label pour les distinguer (« Navigation principale », « Pied de page »).
• role="menu" pour la navigation du site, qui impose aux utilisateurs de lecteurs d’écran un mode de navigation inattendu.
• Un aria-label différent du texte visible : un utilisateur de commande vocale qui prononce le texte affiché ne peut pas activer le bouton.

ARIA dans les critères du RGAA

Comment tester

1. Au clavier seul. Tab, Maj+Tab, Entrée, Espace, Échap et les flèches doivent suffire à utiliser chaque composant, avec un focus toujours visible.
2. Dans l’arbre d’accessibilité. Le panneau Accessibilité des outils de développement de Chrome ou de Firefox montre le rôle, le nom et les états de chaque élément.
3. Avec un lecteur d’écran. NVDA (gratuit, Windows), VoiceOver (macOS et iOS) ou TalkBack (Android) : écoutez ce qui est annoncé à l’ouverture d’un menu ou à l’envoi d’un formulaire.
4. Avec un outil automatique. Il repère les attributs invalides, les références cassées et les composants sans nom. Le pré-audit gratuit les relève sur vos pages.

Questions fréquentes