Qu'est-ce qu'ARIA ?

What is ARIA?

ARIA dans un acronyme pour "Accessible Rich Internet Applications". Il s'agit d'un ensemble d'attributs HTML qui permettent aux développeurs d'applications Web de créer des composants ou des modèles d'interaction personnalisés et accessibles à l'aide d'éléments HTML non sémantiques ou non natifs. Les technologies d'assistance consomment ces attributs et annoncent leur présence aux utilisateurs qui, à leur tour, sont capables de comprendre et d'interagir avec les composants.

En d'autres termes, ARIA agit comme un pont entre les éléments HTML non natifs et les technologies d'assistance en générant une signification sémantique pour les composants personnalisés. ARIA aide à répondre à la question « Qu'est-ce que cette chose et que fait-elle ? » pour les composants personnalisés.

Comment ARIA y parvient-il ?

L'ensemble d'attributs HTML ARIA est appliqué à divers éléments. À partir de là, lorsqu'un utilisateur de lecteur d'écran entre en contact avec un élément comportant un ou plusieurs attributs aria-* , les lecteurs d'écran reconnaîtront les attributs fournis et leurs valeurs et annonceront cette information à haute voix.

ARIA se décompose en :

  • Rôles - définissent ce qu'est ou fait un élément
  • Propriétés - expriment les caractéristiques ou la relation d'un élément
  • États — définissent les conditions actuelles ou les valeurs de données associées à l'élément

Jetons un coup d'œil à quelques-uns des attributs disponibles :

Attribut Objectif Exemple
role Utilisé pour ajouter ou modifier la signification sémantique de base d'un élément. <div role="button"></div>
aria-label Ajoute un nom accessible à un élément. <div role="button" aria-label="Fake button"></div>
aria-disabled Annonce l'élément comme étant dans un état "désactivé". <div role="button" aria-label="Fake button" aria-disabled="true"></div>

Reportez-vous au document Applications Internet enrichies accessibles (WAI-ARIA) 1.1 pour plus d'informations.

Ce qu'ARIA ne fait pas

Il est important de noter ce que fait ARIA (ci-dessus) et aussi ce qu'il ne fait pas .

Lorsque vous appliquez des attributs, des rôles et des propriétés d'état aria-* à un élément HTML, cela ne permet pas automatiquement à l'élément d'être focusable au clavier ou d'ajouter toute l'interactivité attendue du clavier. Ce sont des choses que vous, en tant que développeur, devez implémenter vous-même.

Dans l'exemple précédent, l'élément div avec son attribut role="button" annoncerait l'élément comme, "button" , mais cela ne rendra pas le clavier div focusable. Il ne fournira pas non plus l'interaction clavier attendue via les touches Enter ou Space . Encore une fois, cette fonctionnalité est à ajouter après coup.

Composants personnalisés

Comme mentionné précédemment, ARIA est capable d'ajouter une signification sémantique aux composants personnalisés. Voyons comment créer une case à cocher en HTML natif, puis à nouveau en utilisant ARIA.

HTML

La case à cocher HTML devra avoir :

  • Un élément d' label expliquant son objectif
  • L'élément d' input avec les attributs appropriés pour transmettre ce qu'il est
  • Un état clairement défini, "coché" ou "non coché"

Le code HTML typique d'une case à cocher ressemblerait à ceci :

<label for="apple-checkbox"> <input type="checkbox" id="apple-checkbox" name="apple"> Apple </label>

Lorsque quelqu'un accède à cette case à cocher, un lecteur d'écran annonce,

"Apple, case à cocher, non cochée."

Ce faisant, l'utilisateur saura qu'il est actuellement concentré sur un élément de case à cocher, son étiquette de texte est "Apple" et l'état actuel n'est pas coché. Ils peuvent soit interagir avec la case à cocher (en appuyant sur la touche Space ) ou continuer.

ARIA

Maintenant, recréons la même case à cocher en utilisant des éléments div et des attributs ARIA. La case à cocher devra avoir :

  • Un nom ou une label accessible expliquant son objectif
  • Un role pour transmettre ce qu'il est
  • Un état clairement défini, "coché" ou "non coché"

Passons en revue le code HTML pour accomplir ceci :

<div class="checkbox__wrapper"> <div class="checkbox__checkbox" role="checkbox" tabindex="0" aria-checked="false" aria-labelledby="apple-checkbox" ></div> <div class="checkbox__label" id="apple-checkbox">Apple</div> </div>

Plongeons un peu plus dans le code ici.

  • Le div avec class="checkbox__checkbox" représenterait le visuel de la case à cocher, généralement avec une icône SVG ou CSS.
  • Cette div comporte également role="checkbox" . Il s'agit de l'attribut requis pour que les lecteurs d'écran annoncent ce composant comme une "case à cocher". Sans cela, il apparaîtrait comme un conteneur générique.
  • La div comporte l'attribut tabindex avec sa valeur définie sur 0 . Cela permet aux éléments non focalisables de recevoir le focus du clavier lorsque l'utilisateur navigue vers l'élément.
  • L'attribut aria-checked est présent et indique l'état actuel de la case à cocher. En cas d'interaction, la valeur de cet attribut devrait basculer de false à true .
  • Enfin, le div a l'attribut aria-labelledby avec sa valeur définie sur l' id de l'élément qui contient l'étiquette de texte. Lorsque cette div reçoit le focus clavier, l'attribut aria-labelledby la connexion avec l'élément qui correspond à sa valeur et ajoute le contenu de l'élément correspondant à l'annonce de la case à cocher.

Comme vous pouvez le constater, l'utilisation de la méthode ARIA nécessite un peu plus de code à écrire et à maintenir. Et gardez à l'esprit qu'il ne s'agit que du code HTML nécessaire pour créer la version ARIA d'une case à cocher. Il y a aussi le code CSS pour styliser visuellement la case à cocher ainsi que le JavaScript pour gérer l'événement Space keypress pour basculer la valeur aria-checked .

Pour cette raison, il est recommandé d'utiliser des éléments HTML natifs. De cette façon, il y a moins de code à écrire et à maintenir, ainsi que la prise en charge intégrée du clavier et la signification sémantique qui accompagne chaque élément natif.

Composants non standard

ARIA peut également être utilisé pour créer des modèles d'interface "de bureau" communs qui ne sont pas natifs sur le Web ou dans l'environnement du navigateur.

Par exemple, les applications de bureau complexes peuvent présenter une arborescence ou une interface à onglets comme moyen de naviguer dans le contenu de l'application. Au moment d'écrire ces lignes, aucun élément d' tree ou d' tab n'est disponible en HTML. Par conséquent, si la conception de votre application Web nécessite un tel composant, vous pouvez en créer un et l'implémenter à l'aide d'une combinaison de HTML et d'ARIA pour transmettre la signification et la structure du modèle, puis ajouter CSS et JavaScript pour appliquer le style et les fonctionnalités nécessaires.

D'autres exemples de modèles incluent :

Ces modèles sont documentés sur leur mise en œuvre et les interactions attendues dans le guide WAI-ARIA Authoring Practices , notamment :

  • Descriptions écrites qui expliquent les frappes de clavier attendues que l'on peut utiliser pour interagir avec des composants personnalisés
  • Répertorie les attributs ARIA appropriés (rôles, états et propriétés) à utiliser avec chaque composant afin de transmettre la signification et l'objectif du composant
  • Fournit des exemples entièrement fonctionnels à étudier et à tester à l'aide de la technologie d'assistance

Lors de la création d'un composant personnalisé, référez-vous à ce guide pour vous assurer que ce que vous produisez est accessible et utilisable pour le public le plus large possible.

Composants de région en direct

Une autre fonctionnalité unique ajoutée par ARIA est la possibilité de créer une région en direct . Avec une région en direct, vous pouvez envoyer un message audible aux utilisateurs de lecteurs d'écran, le cas échéant, afin de les informer d'un changement d'état lors d'une interaction ou d'un message chronométré.

 <div role="status" aria-live="polite">5 minutes remaining.</div>

Par exemple:

  • Lors de l'envoi ou de la suppression d'un e-mail d'une liste, il serait idéal d'informer l'utilisateur lorsque le message a été envoyé ou supprimé de sa boîte de réception.
  • Lors de l'ajout d'un article à un panier, informez l'utilisateur de l'ajout réussi.
  • Si quelqu'un dispose d'un temps limité pour accomplir une tâche, annoncez le temps restant à intervalles semi-réguliers.
  • Si une application est actuellement en état de chargement et affiche une animation de chargement, incluez également les utilisateurs de lecteurs d'écran conscients de ce contexte.

Le but d'une région en direct est d'aider à fournir une expérience utilisateur égale pour ceux qui ne peuvent pas voir les interfaces utilisateur que nous créons et de s'assurer qu'ils sont informés du contexte actuel.

La première règle d'utilisation d'ARIA

Il est important de souligner les 5 règles d'utilisation d'ARIA . Ce sont des règles que le W3 et le groupe WAI ont créées pour tenter d'éviter la surutilisation ou l'abus d'ARIA. Il est possible d'abuser et de créer une mauvaise expérience utilisateur lorsque les attributs aria-* sont utilisés de manière incorrecte.

Soulignons la première règle d'utilisation d'ARIA :

"Si vous pouvez utiliser un élément ou un attribut HTML natif avec la sémantique et le comportement dont vous avez besoin déjà intégrés, au lieu de réaffecter un élément et d'ajouter un rôle, un état ou une propriété ARIA pour le rendre accessible, faites-le."

En d'autres termes, n'utilisez pas ARIA si vous pouvez l'aider. Utilisez plutôt le HTML natif.

Ressources:

Retour au blog