Il s'agit du premier article de la série « ARIA avancé » de Harris Schneiderman. Dans cette série, il expliquera comment créer des widgets et des structures accessibles à l'aide d'ARIA, en proposant des conseils pratiques et des exemples concrets.
Près d'un quart de siècle s'est écoulé depuis la première publication du HTML. Dire que nous avons fait un long chemin en matière de fonctionnement du contenu web serait un euphémisme ; à l'époque, ce contenu était essentiellement statique.
De nos jours, le contenu est dynamique et ne peut pas toujours être pris en charge par les éléments HTML natifs, notamment en matière d’accessibilité. Dans les applications web modernes, ARIA est devenu indispensable pour rendre accessibles les widgets complexes et dynamiques. Dans cette série consacrée à ARIA avancé, je vais vous faire découvrir en détail les fonctionnalités avancées d’ARIA et vous expliquer comment l’utiliser pour créer des widgets et des structures complexes et accessibles. Je vais également vous proposer quelques exemples concrets illustrant comment créer du contenu accessible à l’aide d’ARIA. Voici quelques exemples des thèmes que nous aborderons dans ce premier article :
- Un rappel sur le fonctionnement d'ARIA et sur la manière dont il est utilisé pour créer du contenu web accessible
- Bonnes pratiques ARIA
- Les situations difficiles et comment les surmonter
Sans plus attendre, commençons.
ARIA : un petit rappel
Les applications Internet riches accessibles (ARIA) constituent une spécification technique qui fournit un cadre d’attributs destiné à rendre les composants Web accessibles. Grâce à ARIA, nous pouvons définir des attributs simples, exploitables par les technologies d’assistance, afin de transmettre des informations sur les widgets, les structures et les comportements. Il est important de garder à l’esprit qu’il est toujours préférable d’utiliser des éléments HTML natifs plutôt que leurs équivalents ARIA. Autrement dit, il faut utiliser un élément `button` de type « button » plutôt qu’ un élément `div` de rôle « button ».
Les attributs ARIA peuvent être classés en trois catégories : les rôles, les états et les propriétés. Examinons ces catégories.
Rôles
Les rôles sont des attributs qui fournissent des informations sur la nature d'un élément. Par exemple, le rôle « role="checkbox" » indique aux technologies d'assistance que l'élément est une case à cocher. Parmi les autres rôles, on peut citer : « alert », « dialog », « progressbar », « log », « radio », « slider » et bien d'autres encore.
États
Les attributs d'état indiquent l'état actuel d'un élément. Par exemple, l'attribut `aria-checked="true"` indique aux technologies d'assistance qu'une case à cocher est actuellement cochée. Parmi les autres attributs d'état, on peut citer : « aria-expanded », « aria-invalid », « aria-pressed », « aria-valuenow », « aria-sort », etc.
Caractéristiques
Les propriétés sont des attributs essentiels qui décrivent la nature de l’élément. Elles s’apparentent fortement aux états, la seule différence étant que les propriétés sont beaucoup moins susceptibles d’être mises à jour de manière dynamique. Par exemple, aria-label="Conditions générales" indiquera aux technologies d'assistance que l'étiquette accessible de l'élément est « Conditions générales ». Voici d'autres exemples d'attributs de propriété : « aria-labelledby », « aria-describedby », « aria-controls », « aria-owns » et « aria-posinset ».
ARIA et A11Y
Dans la réalité, de nombreux sites web ne sont pas conçus dans un souci d'accessibilité. Heureusement, dans ces cas-là, ARIA peut vraiment faire la différence. Prenons l'exemple du code HTML ci-dessous, qui illustre des éléments de boutons et de liens mal codés, conçus sans tenir compte des questions d'accessibilité :
<div class="button">Close</div> <span class="link" onclick="location.href='/home'">Home</span>
Ce balisage présente quelques problèmes :
- Aucun élément n'est prévu pour permettre à un lecteur d'écran de savoir de quoi il s'agit (leurs rôles).
- Les utilisateurs du clavier ne pourront pas interagir avec ces éléments de contrôle (ils ne peuvent être ni sélectionnés ni activés à l'aide du clavier)
ARIA à la rescousse
Comme je l’ai déjà mentionné, il est préférable d’utiliser simplement les éléments « button » et « a » natifs dans ce cas de figure, car ces éléments permettent par défaut de recevoir le focus et d’être activés au clavier. Cependant, dans certains cas — que ce soit parce que votre responsable ne dispose pas du budget ou des ressources nécessaires pour réécrire entièrement le contenu, ou parce que votre graphiste refuse de modifier la structure des balises HTML ou la déclaration des règles CSS —, ARIA et JavaScript peuvent apporter une solution très rapide et simple.
La solution
L'ajout des rôles « button » et « link » permettra aux utilisateurs de lecteurs d'écran de savoir de quels éléments il s'agit. De plus, l'ajout de `tabindex="0"` à ces deux éléments permettra aux utilisateurs du clavier de les sélectionner. La dernière étape consiste à les rendre activables à l'aide du clavier, ce qui s'effectue à l'aide de gestionnaires d'événements JavaScript très simples qui imitent le comportement des éléments « button » et « anchor » natifs. Cela signifie que l'élément « button » doit pouvoir être activé à l'aide des touches Entrée ou Barre d'espace, et que l'élément « anchor » doit pouvoir être activé à l'aide de la touche Entrée.
<div role="button" tabindex="0" class="button">Close</div> <span role="link" tabindex="0" class="link" onclick="location.href='/home'">Home</span>
button.addEventListener('keydown', function (e) {
// if ENTER or SPACE was pressed
if (e.which === 13 || e.which === 32) {
e.preventDefault();
e.target.click();
}
});
link.addEventListener('keydown', function (e) {
// if ENTER was pressed
if (e.which === 13) {
e.target.click();
}
});
Bonnes pratiques ARIA
Voyons quelques exemples supplémentaires illustrant les cas où il est préférable d'utiliser des éléments HTML natifs plutôt que les rôles ARIA.
Titres
Les titres peuvent être mis en œuvre à l'aide des éléments HTML natifs h1 à h6, mais les mêmes informations peuvent être transmises aux technologies d'assistance à l'aide du rôle « heading » et de l'attribut aria-level.
<h2>I am a heading level 2</h2> <div role="heading" aria-level="2">I am also a heading level 2</div>
Listes
Les listes peuvent être mises en œuvre à l'aide des éléments HTML natifs `ul ` et `li`, mais peuvent également l'être en utilisant correctement les rôles « list » et « listitem ».
<ul>
<li>One</li>
<li>Two</li>
</ul>
<div role="list"> <div role="listitem">One</div> <div role="listitem">Two</div> </div>
Boutons radio
Les boutons radio peuvent être implémentés à l'aide des éléments natifs `input type="radio"`, mais l'attribut `role="radio"` (en plus de la gestion du `tabindex`) permet d'atteindre le même objectif. Gardez à l'esprit que pour les composants tels que les groupes de boutons radio, si vous n'utilisez pas les éléments natifs, vous devrez recourir à JavaScript pour reproduire le comportement natif (déplacement entre les boutons radio du groupe à l'aide des touches fléchées).
<fieldset>
<legend>Favorite Food</legend>
<label for="pasta">Pasta</label>
<input id="pasta" name="food" type="radio" />
<label for="pizza">Pizza</label>
<input id="pizza" name="food" type="radio" />
</fieldset>
<div role="radiogroup" aria-labelledby="group-label"> <h2 id="group-label">Favorite Food</h2> <div id="pasta-label">Pasta</div> <div tabindex="0" role="radio" aria-labelledby="pasta-label"></div> <div id="pizza-label">Pizza</div> <div tabindex="-1" role="radio" aria-labelledby="pizza-label"></div> </div>
Situations difficiles
Les contenus web complexes peuvent donner lieu à des situations particulièrement délicates. Par exemple, un contenu dynamique qui met à jour des parties éloignées de la page, ou encore des widgets interactifs qui modifient l'état de leurs composants. De plus, les widgets personnalisés, tels que les sélecteurs de date ou les carrousels, peuvent s'avérer très difficiles à mettre en œuvre, car il n'existe pas d'attributs ARIA spécifiques aux composants qui constituent un sélecteur de date. Grâce à ARIA et à JavaScript, tous ces défis peuvent être surmontés !
Points à retenir
Chaque composant d’une application web doit indiquer ses rôles, ses états et ses propriétés afin que les technologies d’assistance puissent exploiter ces informations. Il convient également de veiller à l’accessibilité au clavier et au toucher, au contraste des couleurs, ainsi qu’au respect des spécifications relatives au rôle en matière de fonctionnalités clavier et de gestion des attributs. Je trouve extrêmement utile de suivre la « Liste de contrôle pour le développement accessible des contrôles personnalisés » du W3C.
Ne manquez pas mon prochain article de cette série, dans lequel j'aborderai plus en détail les « Live Regions » ainsi qu'un widget de tri accessible au clavier que j'aime appeler « Dragon Drop ».
