Bonnes pratiques d'implémentation des listes HTML et
Les listes HTML constituent un élément fondamental de la sémantique Html. Correctement implémentées, elles permettent aux technologies d'assistance de restituer efficacement l’organisation de contenus associés, en annonçant le regroupement en liste, le nombre d'éléments présents ainsi que la position de chaque item dans la liste.
À l'inverse, une mauvaise utilisation des balises <ul>, <ol> et <li> peut altérer l'expérience utilisateur des personnes naviguant avec un lecteur d'écran, et conduire à des non-conformités vis-à-vis des référentiels d'accessibilité tels que les WCAG, ou le RGAA et RAWeb.
Cet article présente plusieurs règles essentielles permettant une implémentation sémantique correcte et accessible des listes HTML.
1. Éviter les listes à élément unique
Par définition, une liste représente un ensemble d'éléments partageant une même nature, ou participant à une même structure logique.
Exemples d'usages :
- Listes d'étapes d'un processus
- Liste de pages d'une pagination
- Liste de gens dans un groupe
- Liste de liens dans un menu
- Liste de vidéos dans une catégorie
L'utilisation d'une balise <ul> ou <ol> pour encapsuler un unique élément est généralement déconseillée, car incohérente avec la définition même d'une liste.
Exemple d'implémentation à éviter
<ul>
<li>Conditions générales d'utilisation</li>
</ul>
Dans cette situation, l'utilisation d'un simple paragraphe ou d'un autre élément de structuration est souvent plus appropriée.
Cas de tolérance
Ce type d'implémentation est toléré dans le cas de certains composants réutilisables, qui affichent habituellement plusieurs éléments, mais peuvent occasionnellement n'en présenter qu'un seul (liste de résultats, galerie, cartes de produits, etc.).
Dans ce contexte, conserver la structure de liste reste pertinent afin de préserver la cohérence du composant, et d'éviter une logique conditionnelle complexe dans le code ou la création d'un autre composant.
2. Savoir quand utiliser <ul> et <ol>
Le choix entre une liste ordonnée (<ol>) et une liste non ordonnée (<ul>) doit être guidé par la relation logique entre les éléments.
La liste ordonnée <ol>
Une liste ordonnée est adaptée lorsque l'ordre des éléments possède une signification intrinsèque.
Exemples de cas d’usage
- Étapes successives d'un processus ;
- Procédure d'installation ;
- Classement ;
- Chronologie.
- Fonctionnalités
- Avantages
- Catégories
- Liens connexes
Exemple d’implémentation accessible
<ol>
<li>Créer un compte</li>
<li>Valider son adresse courriel</li>
<li>Se connecter</li>
</ol>
La liste non-ordonnée <ul>
Une liste non ordonnée est appropriée lorsque les éléments sont simplement regroupés, sans que la notion de séquence ou d'ordre soit nécessaire à leur compréhension.
Exemples de cas d’usage
- Fonctionnalités
- Avantages
- Catégories
- Liens connexes
Exemple d’implémentation accessible
<ul>
<li>Compatible clavier</li>
<li>Compatible lecteur d'écran</li>
<li>Responsive</li>
</ul>
Cas particulier : éléments de liste ordonnée déjà numérotés
Il arrive que le contenu textuel des items d’une liste ordonnée soit lui-même numéroté. Si cette numérotation fait partie intégrante du contenu affiché et restitué par les lecteurs d'écran, l'utilisation d'une liste <ul> est recevable.
Les référentiels WCAG et RGAA n'imposent pas l'utilisation systématique d'une balise <ol> dès lors qu'un ordre est donné autrement et restitué aussi bien visuellement que par les lecteurs d'écran. L'important est que la relation logique entre les éléments soit correctement restituée à tous les utilisateurs.
3. Respecter la structure HTML des listes
Une erreur fréquente consiste à insérer directement des éléments autres que <li> dans un conteneur <ul> ou <ol>, telles que des <div>, <p>, <hn> etc.
Exemple d'implémentation non accessible
<ul>
<div>Élément 1</div>
<div>Élément 2</div>
</ul>
Ou encore :
<ul>
<p>Description</p>
<li>Premier élément</li>
</ul>
Pour être conforme, une liste HTML <ul> ou <ol> doit contenir uniquement ses éléments <li> comme descendants directs.
Exemple d’implémentation accessible
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
Si un contenu complémentaire doit être associé à un item, celui-ci doit être intégré au <li> concerné.
Exemple d’implémentation accessible:
<ul>
<li>
<h3>Titre 1</h3>
<p>Description de l'élément 1</p>
</li>
<li>
<h3>Titre 2</h3>
<p>Description de l'élément 2</p>
</li>
</ul>
Cette règle garantit une restitution cohérente par les lecteurs d'écran, qui s'appuient sur cette structure.
4. Ne pas intégrer le titre de la liste comme élément <li>
Une autre erreur, courante également, consiste à considérer le titre de la liste comme un premier élément de celle-ci.
Exemple d'implémentation à éviter
<ul>
<li>Services proposés : </li>
<li>Audit d'accessibilité</li>
<li>Formation</li>
<li>Accompagnement</li>
</ul>
Dans cet exemple, le lecteur d'écran annoncera quatre éléments, alors que seuls trois constituent réellement le contenu de la liste.
Bonne pratique
Le titre doit être implémenté hors de la liste.
► Solution 1 : en utilisant une balise de titre <hn> adaptée à la hiérarchie de titres de la page.
Exemple :
<h2>Services proposés</h2>
<ul>
<li>Audit d'accessibilité</li>
<li>Formation</li>
<li>Accompagnement</li>
</ul>
► Solution 2 : il est également possible d'associer le titre à sa liste grâce au couplage d'attributs aria-labelledby + id, ou la valeur du id est unique dans le document Html.
Exemple :
<h2 id="services-title">Services proposés</h2>
<ul aria-labelledby="services-title">
<li>Audit d'accessibilité</li>
<li>Formation</li>
<li>Accompagnement</li>
</ul>
Pour aller plus loin
On aime parler d'accessibilité! On discute de votre projet bientôt?