ARIA : Accessible Rich Internet Applications

Qu'est-ce que la technologie ARIA ?

ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs HTML permettant de rendre les contenus et interfaces web dynamiques plus accessibles aux personnes en situation de handicap, notamment lorsqu'ils utilisent des technologies d'assistance comme les lecteurs d'écran.

Elle vise surtout à donner des indications techniques qui permettent de faire comprendre au navigateur - et donc à l'internaute - comment interpréter une interface dynamique (par exemple : un système d'onglets) là où JavaScript seul ne le permet pas. En général elle n'aura pas d'intérêt majeur sur du contenu "standard" (texte, titres, listes à puces, liens) s'il est correctement réalisé ou balisé par un système de gestion de contenu. Il faudra plutôt l'appliquer sur des composants complexes (par exemple : menus de navigation à plusieurs niveaux, blocs déployables, accordéons, carrousels, formulaires complexes, etc).

Pourquoi utiliser ARIA ?

• Accessibilité des interfaces dynamiques : ARIA permet de décrire le rôle, l'état et les propriétés des éléments interactifs qui ne sont pas nativement accessibles.
• Compatibilité avec les technologies d'assistance : Les lecteurs d'écran et autres outils peuvent interpréter correctement les éléments enrichis.
• Amélioration de l'expérience utilisateur : Les utilisateurs en situation de handicap bénéficient d'une navigation plus fluide et compréhensible.

Bonnes pratiques et recommandations

• HTML se doit déjà d'être accessible par nature. Il faut donc en premier lieu privilégier les éléments HTML natifs accessibles avant d'avoir à utiliser ARIA.
• C'est un complément pour l'accessibilité qui joue un rôle là où d'autres techniques restent limitées. Il ne s'agit pas d'une surcouche d'accessibilité qui va remplacer et corriger l'ensemble des pages ou composants ; elle doit être appliquée avec intelligence.
• Des tests doivent être réalisés, par exemple grâce à un audit d'accessibilité, pour s'assurer que les modèles ARIA (patterns) sont bien respectés.

Quelques exemples simples

• Rôles ARIA : Définir le type d'un élément pour les technologies d'assistance.
  <nav role="navigation">...</nav>
• Labels ARIA : Associer un texte descriptif à un élément interactif.
  <button aria-label="Fermer la fenêtre">×</button>
• États et propriétés ARIA : Indiquer l'état d'un composant dynamique.
  <button aria-expanded="true">Menu</button>
• Live regions : Annoncer dynamiquement des changements de contenu.
  <div aria-live="polite">Nouveau message reçu</div>
• Navigation par régions : Utiliser role="main", role="banner", role="complementary" pour structurer la page.