Les listbox

Introduction

ARIA met à disposition un grand nombre de composants qui peuvent servir dans les interfaces riches (onglet, accordéon…). Nous allons étudier le cas des listbox. Il s'agit d'un composant qui permet à l’utilisateur de sélectionner un ou plusieurs éléments à partir d’une liste de choix.

Les éléments d’une listbox sont statiques, une listbox n’est pas destinée à recevoir des éléments interactifs (tels que des liens, des boutons…), en revanche celle-ci peut contenir des images à l’inverse d’un select.

Plus d’infos : WAI-ARIA Authoring Practices.

Mise en garde

Bien que des progrès soient réalisés à chaque nouvelle version, le support de l’ARIA est encore partiel pour l’ensemble des lecteurs d’écran. Son utilisation doit être conditionnée par des tests de compatibilité sur l’environnement cible (couple navigateur/lecteur d’écran).

Mise en place

Code HTML

Pour créer une listbox, il suffit d’appliquer le rôle listbox à un conteneur parent. Puis d’appliquer le rôle option aux différentes options de la liste. On n’oubliera pas de rendre cette liste focusable pour les utilisateurs qui naviguent à l’aide du clavier (ajout d’un attribut tabindex="0") ni d’ajouter un label (aria-label ou aria-labelledby) pour les personnes qui utilisent un lecteur d’écran.


<ul role="listbox" tabindex="0" aria-label="liste des dossiers">
  <li role="option">Boite de réception (4) <span class="visually-hidden">messages non lus</span></li>
  <li role="option">Eléments envoyés</li>
  <li role="option">Brouillons</li>
  <li role="option">Corbeille</li>
</ul>

À noter que les balises ul et li pourraient être remplacées par de simples balises div.

Interactions

Pour coller avec le pattern ARIA de la listbox (WAI-ARIA Authoring Practices), il est indispensable de gérer quelques interactions à l’aide de code Javascript. Le clavier doit permettre de naviguer dans la liste :

  • Flèche haut pour sélectionner l’élément précédent
  • Flèche bas pour sélectionner l’élément suivant

Pour les listes à sélection multiple : shift ou control + flèches haut et bas, barre espace.

Exemples

Le W3C met à disposition plusieurs exemples fonctionnels.

Liens

Plus d’infos sur ARIA et les listbox :