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.
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 :
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.
<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.
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.
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.
Une liste ordonnée est adaptée lorsque l'ordre des éléments possède une signification intrinsèque.
<ol>
<li>Créer un compte</li>
<li>Valider son adresse courriel</li>
<li>Se connecter</li>
</ol>
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.
<ul>
<li>Compatible clavier</li>
<li>Compatible lecteur d'écran</li>
<li>Responsive</li>
</ul>
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.
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.
<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.
<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.
Une autre erreur, courante également, consiste à considérer le titre de la liste comme un premier élément de celle-ci.
<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.
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>
On aime parler d'accessibilité! On discute de votre projet bientôt?