Introduction à ARIA

Le langage HTML (HyperText Markup Language) a d’abord été conçu pour créer des pages de texte statiques. JavaScript propose des composants qui n’existent pas dans le modèle HTML natif. La norme ARIA (Accessible Rich Internet Applications) offre aux responsables du développement des fonctionnalités d’accessibilité qui ne sont pas possibles avec le langage HTML seul.

ARIA est un ensemble d’attributs (propriétés des balises HTML) qui rend le contenu Web et les applications plus accessibles. Lorsque le recours aux balises sémantiques HTML n’est pas possible, ARIA permet de communiquer des renseignements sémantiques et des interactions aux technologies d’assistance. ARIA transmet aux technologies d’assistance de l’information sémantique sur les widgets (éléments de l’interface utilisateur), les structures (relations) et les comportements. Une expérience réellement accessible repose sur le bon usage de cet outil, car une mauvaise utilisation d’ARIA peut rendre les expériences désagréables, voire inutilisables.

Lorsque le code natif ou la technologie sous-jacente ne suffisent pas, les attributs ARIA peuvent rendre les balises HTML non sémantiques comme <div> plus accessibles. Par exemple, supposons que vous utilisiez une bibliothèque ou un cadre externe qui utilise la balise <div> pour définir un bouton. Il pourrait être plus simple d’ajouter une balise ARIA comme role=" button" pour ce composant plutôt que de récrire les fonctions et les styles existants. Faites attention lorsque vous adoptez cette approche, car vous devrez aussi confirmer que le code JavaScript approprié est en place pour rendre l’élément accessible (assurez-vous par exemple que l’élément peut recevoir le focus et définissez les gestionnaires d’événements lorsque l’utilisateur appuie sur une touche ou effectue un clic).

Si vous comptez améliorer l’accessibilité de votre contenu HTML à l’aide de balises ARIA, consultez les pratiques de rédaction et les exemples détaillés ci-dessous. En résumé, la première règle d’ARIA est la suivante : si vous pouvez utiliser des attributs sémantiques ou HTML, utilisez-les. Notez bien qu’ARIA n’est utile que lorsqu’il est bien utilisé : il vaut mieux l’éviter complètement plutôt que de l’utiliser incorrectement.

Exemples de situations qui justifient l’utilisation d’ARIA

Points de repère

• Les points de repère définissent les sections d’une page Web, ce qui facilite la navigation pour les utilisateurs de lecteurs d’écran. Les points de repère peuvent être définis en tant qu’éléments HTML ou à l’aide de rôles ARIA : un point de repère <header> peut être remplacé, au besoin, sur n’importe quel élément (comme une balise <div>) par l’ajout de role="banner".
• Un point de repère <aside> peut être remplacé par role="complementary".
• Un point de repère <footer> peut être remplacé par  role="contentinfo".

Rôles ARIA et JavaScript

Certains cadres JavaScript génèrent des pages Web contenant du code non sémantique, par exemple un élément <div> au lieu de <button>. Ajouter le rôle ARIA role="button" attribuera un rôle sémantique à l’élément <div>.

Lorsque JavaScript est utilisé pour créer des composants spéciaux qui n’existent pas nativement en HTML, il peut être nécessaire de donner un rôle ARIA pour définir ces composants. Par exemple :

• Un accordéon sera agrandi et réduit à l’aide d’un bouton portant l’attribut suivant : aria‑expanded="true"/"false".
• Un ensemble d’onglets sur une page Web devra avoir les attributs role="tablist", role="tab" et role="tabpanel".

D’autres exemples sont fournis sur le site des pratiques de rédaction ARIA (en anglais seulement).

Étiquettes

Il existe plusieurs façons d’étiqueter un bouton (en plus du texte à l’écran). Par exemple :

• Un attribut aria-label suivi d’un texte précisant l’étiquette, p. ex. aria-label="continue".
• Un attribut aria-labelledby peut pointer vers le texte existant à l’écran à titre d’étiquette.
• Un attribut aria-describedby peut relier sémantiquement un champ à remplir avec une erreur intégrée. Un lecteur d’écran annoncera automatiquement l’erreur lorsque l’utilisateur utilise la touche de tabulation pour atteindre le champ de saisie.

Zones live ARIA

Une zone live Aria est une section d’une page Web qu’un lecteur d’écran annonce automatiquement si le contenu change dynamiquement après le chargement initial de la page. La zone live ARIA fournit des messages importants quant à l’état du contenu. On retrouve plusieurs codes, dont :

• role="alert" ou aria-live="assertive", qui indique au lecteur d’écran d’arrêter le message actuel pour annoncer un changement de contenu dynamique;
• aria-live="polite", qui indique au lecteur d’écran d’annoncer la zone live mise à jour après avoir terminé d’annoncer le contenu en cours de lecture.

aria-hidden

L’attribut aria-hidden="true" indique au lecteur d’écran d’ignorer un élément et de ne pas l’annoncer. Aria-hidden peut être utile pour le contenu qui s’affiche à l’écran, mais qui pourrait provoquer la confusion chez les utilisateurs de lecteurs d’écran.

Par exemple :

• Une icône placée à côté d’un texte redondant (comme une icône de corbeille apposée au mot « supprimer »), car l’utilisateur n’a pas besoin que les deux éléments soient annoncés;
• Le contenu de l’arrière-plan qui est grisé lorsqu’une fenêtre contextuelle s’affiche par-dessus la page. Lorsqu’une fenêtre contextuelle s’affiche, les utilisateurs de lecteurs d’écran n’ont pas besoin de lire la page en arrière-plan.