ARIA

ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs HTML qui décrivent les composants d'interface aux technologies d'assistance. Un bouton personnalisé, un système d'onglets, une notification dynamique : quand le HTML sémantique ne suffit pas, ARIA ajoute les informations manquantes. Mais un attribut ARIA sans le comportement correspondant fait plus de mal que de bien.

Votre <div> fonctionne comme un bouton. Les utilisateurs voyants cliquent sans problème. Mais un lecteur d'écran ne voit qu'un bloc de texte anonyme. ARIA existe pour corriger ça, et la première chose à savoir, c'est quand ne pas l'utiliser.

#Quand utiliser ARIA (et quand s'abstenir)

La spécification ARIA in HTML pose une règle que le W3C appelle la « première règle d'ARIA »\u00a0: si un élément HTML natif avec la sémantique voulue existe, utilisez-le. Pas d'ARIA.

Un <button> gère le focus, les touches Entrée et Espace, et s'annonce correctement aux lecteurs d'écran. Tout ça gratuitement. Ajouter role="button" à un <div> oblige à recréer chacun de ces comportements en JavaScript.

<!-- ❌ Sémantique simulée, comportement absent -->
<div role="button" onclick="save()">Enregistrer</div>
 
<!-- ✅ Sémantique native, comportement inclus -->
<button onclick="save()">Enregistrer</button>

ARIA prend le relais là où le HTML s'arrête\u00a0: onglets, menus déroulants, modales, zones de notification dynamiques. Le W3C APG documente chaque motif avec sa structure, sa gestion clavier et ses attributs requis.

#L'erreur qui revient sur chaque projet

Ajouter un attribut ARIA sans fournir le comportement correspondant. C'est mentir au lecteur d'écran.

aria-expanded="false" sur un bouton d'accordéon\u00a0? Le lecteur d'écran annonce « réduit ». Si un clic ouvre le panneau sans que JavaScript bascule la valeur à true, l'utilisateur entend toujours « réduit » devant un contenu visible. L'interface dit une chose, l'écran en montre une autre.

Même piège avec la redondance. Un <nav role="navigation"> ne fait qu'encombrer le code\u00a0: <nav> porte déjà le rôle navigation.

Chaque attribut ARIA est un contrat. Si vous déclarez un état, maintenez-le synchronisé. Si vous attribuez un rôle, fournissez le comportement clavier attendu.

#En résumé

HTML sémantique d'abord. ARIA uniquement quand le HTML natif ne couvre pas le besoin. Et chaque attribut ARIA que vous posez doit être soutenu par du JavaScript qui tient sa promesse.