Présentation d'ARIA

Introduction à ARIA et à la sémantique HTML non native

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Jusqu'à présent, nous avons encouragé l'utilisation d'éléments HTML natifs, car ils assurent la concentration, la compatibilité avec le clavier et la sémantique intégrée. Toutefois, il arrive qu'une mise en page simple et du code HTML natif ne suffisent pas. Par exemple, il n'existe actuellement aucun élément HTML standardisé pour une construction d'interface utilisateur très courante : le menu contextuel. Il n'existe pas non plus d'élément HTML fournissant une caractéristique sémantique, telle que "l'utilisateur doit en être informé dès que possible".

Dans cette leçon, nous allons voir comment exprimer une sémantique que le code HTML ne peut pas exprimer seul.

La spécification des applications Internet riches accessibles via Web Accessibility Initiative (WAI-ARIA, ou simplement ARIA) permet de combler les zones présentant des problèmes d'accessibilité qui ne peuvent pas être gérés avec du code HTML natif. Elle vous permet de spécifier des attributs qui modifient la traduction d'un élément dans l'arborescence d'accessibilité. Examinons un exemple.

Dans l'extrait de code suivant, nous utilisons un élément de liste comme une sorte de case à cocher personnalisée. La classe "case à cocher" CSS donne à l'élément les caractéristiques visuelles requises.

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

Bien que cela fonctionne bien pour les utilisateurs voyants, un lecteur d'écran n'indiquera pas que l'élément est destiné à être une case à cocher. Les utilisateurs malvoyants peuvent donc le manquer complètement.

En revanche, à l'aide d'attributs ARIA, nous pouvons fournir à l'élément les informations manquantes afin que le lecteur d'écran puisse l'interpréter correctement. Ici, nous avons ajouté les attributs role et aria-checked pour identifier explicitement l'élément en tant que case à cocher et spécifier qu'il est coché par défaut. L'élément de liste est désormais ajouté à l'arborescence d'accessibilité, et un lecteur d'écran le signale correctement en tant que case à cocher.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA modifie et améliore l'arborescence d'accessibilité DOM standard.

Arborescence d&#39;accessibilité DOM standard.
Arborescence d&#39;accessibilité augmentée ARIA.

Bien que les ARIA nous permettent de modifier subtilement (ou même radicalement) l'arborescence d'accessibilité pour n'importe quel élément de la page, c'est la seule chose qu'elle modifie. ARIA n'augmente pas le comportement inhérent de l'élément. Cela ne le rend pas sélectionnable et ne lui donne pas d'écouteurs d'événements au clavier. Cela fait toujours partie de notre tâche de développement.

Il est important de comprendre qu'il n'est pas nécessaire de redéfinir la sémantique par défaut. Quelle que soit son utilisation, un élément HTML <input type="checkbox"> standard ne nécessite pas d'attribut ARIA role="checkbox" supplémentaire pour être correctement annoncé.

Notez également que certains éléments HTML comportent des restrictions concernant les rôles et les attributs ARIA pouvant être utilisés. Par exemple, aucun rôle/attribut supplémentaire ne peut être appliqué à un élément <input type="text"> standard.

Pour en savoir plus, consultez la spécification ARIA dans le code HTML.

Voyons les autres fonctionnalités offertes par ARIA.

Quels sont les avantages des flux ARIA ?

Comme vous l'avez vu avec l'exemple de case à cocher, ARIA peut modifier la sémantique des éléments existants ou ajouter une sémantique aux éléments dépourvus de sémantique native. Elle peut également exprimer des modèles sémantiques qui n'existent pas du tout en HTML, comme un menu ou un panneau d'onglets. Les flux ARIA permettent souvent de créer des éléments de type widget, ce qui ne serait pas possible avec du code HTML brut.

  • Par exemple, ARIA peut ajouter une étiquette et un texte de description supplémentaires qui ne sont exposés qu'aux API de technologies d'assistance.
<button aria-label="screen reader only label"></button>
  • ARIA peut exprimer des relations sémantiques entre des éléments qui étendent la connexion parent/enfant standard, comme une barre de défilement personnalisée qui contrôle une région spécifique.
    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>
  • ARIA peut rendre certaines parties de la page en ligne afin d'informer immédiatement les technologies d'assistance lorsqu'elles changent.
    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

L'un des aspects essentiels du système ARIA est sa collection de rôles. Un rôle dans les termes d'accessibilité équivaut à un indicateur abrégé pour un modèle d'interface utilisateur particulier. ARIA fournit un vocabulaire de modèles que nous pouvons utiliser via l'attribut role sur n'importe quel élément HTML.

Lorsque nous avons appliqué role="checkbox" dans l'exemple précédent, nous avons indiqué à la technologie d'assistance que l'élément devait suivre le modèle de "case à cocher". En d'autres termes, nous vous garantissons qu'il sera coché (ou non) et que l'état pourra être activé ou désactivé à l'aide de la souris ou de la barre d'espace, tout comme un élément de case à cocher HTML standard.

En fait, étant donné que les interactions avec le clavier occupent une place prépondérante dans l'utilisation des lecteurs d'écran, il est très important de s'assurer que lors de la création d'un widget personnalisé, l'attribut role est toujours appliqué au même endroit que l'attribut tabindex. Cela garantit que les événements de clavier sont placés au bon endroit et que lorsque le curseur est placé sur un élément, son rôle est transmis avec précision.

La spécification ARIA décrit une taxonomie des valeurs possibles pour l'attribut role et les attributs ARIA associés qui peuvent être utilisés avec ces rôles. Il s'agit de la meilleure source d'informations définitives sur la façon dont les rôles et attributs ARIA fonctionnent ensemble, et sur la manière de les utiliser d'une manière compatible avec les navigateurs et les technologies d'assistance.

Liste de tous les rôles ARIA disponibles.

Cependant, la spécification est très dense. Un point de départ plus accessible est le document sur les pratiques de création ARIA, qui explore les bonnes pratiques d'utilisation des rôles et propriétés ARIA disponibles.

ARIA propose également des rôles de repère qui étendent les options disponibles dans HTML5. Pour en savoir plus, consultez la spécification sur les modèles de conception des rôles de repère.