WAI-ARIA

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) est une spécification du W3C qui ajoute des attributs sémantiques au HTML : rôles, états et propriétés. Ces attributs permettent aux technologies d'assistance de comprendre les composants d'interface dynamiques que le HTML natif ne peut pas décrire seul. La version 1.2 est la recommandation officielle depuis juin 2023.

Un bouton personnalisé en <div>, un système d'onglets, une notification asynchrone : le HTML natif ne sait pas décrire ces composants aux lecteurs d'écran. WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) est la spécification du W3C qui comble ce vide. La version 1.2, publiée en juin 2023, est la recommandation officielle.

#Rôles, états, propriétés

La spécification repose sur trois types d'attributs :

• Les rôles indiquent ce qu'est un élément : role="tab", role="dialog", role="alert". Chaque rôle a des contraintes : un tab doit être enfant d'un tablist, un option doit se trouver dans un listbox.
• Les états décrivent la situation actuelle : aria-expanded="false" pour un panneau replié, aria-checked="true" pour une case cochée. Ils changent au fil des interactions.
• Les propriétés apportent des informations complémentaires : aria-label nomme un élément sans texte visible, aria-describedby y associe une explication, aria-required signale un champ obligatoire.

En combinant ces trois types, le développeur restitue un composant complet aux technologies d'assistance :

<button aria-expanded="false" aria-controls="panel-1">
  Détails du produit
</button>
<div id="panel-1" role="region" hidden>
  Contenu masqué par défaut.
</div>

Le lecteur d'écran annonce : « Détails du produit, bouton, réduit ». L'utilisateur sait qu'il peut déplier la section. Sans aria-expanded, il n'a aucune indication sur l'état du panneau.

#ARIA ne remplace pas le comportement

C'est le piège le plus courant. Ajouter role="button" à un <div> modifie l'annonce vocale, mais ne gère ni le focus clavier, ni la touche Entrée, ni la touche Espace. Le composant ment.

<!-- ❌ Annoncé "bouton", inutilisable au clavier -->
<div role="button" onclick="save()">Enregistrer</div>
 
<!-- ✅ Focusable, activable, sémantique natif -->
<button onclick="save()">Enregistrer</button>

La spécification ARIA in HTML formalise ce principe : si un élément HTML natif avec la sémantique voulue existe, utilisez-le. « No ARIA is better than bad ARIA » résume toute la philosophie.

Quand le HTML natif ne suffit pas, ARIA prend le relais. Onglets, menus déroulants, sliders, zones de notification dynamiques : le W3C APG documente chaque motif de conception avec sa structure, sa gestion clavier et ses attributs requis.

#En résumé

WAI-ARIA donne une voix aux composants que le HTML ne sait pas décrire. Chaque attribut ARIA est un engagement : le développeur doit fournir le comportement correspondant. Le RGAA vérifie cette cohérence dans sa thématique 7 (Scripts). Commencez par le HTML sémantique. ARIA vient après.