Les listbox

  • Composant

Mise à jour de l'article du

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 ou zone de liste. 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 Guide.

Mise en garde

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

Mise en place

Code HTML

Pour créer une listbox ou zone de liste, 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, leur sémantique est surchargée par le rôle ARIA.

Interactions

Pour coller avec le design pattern ou modèle de conception ARIA de la listbox (WAI-ARIA Authoring Practices Guide - listbox), 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 :