Regrouper des puces les unes sous les autres avec des tirets ne fait pas une liste : pour qu’un lecteur d’écran annonce « liste de 4 éléments » et permette d’y naviguer, il faut la structure native <ul>/<ol>/<li>. La balise <ul> convient quand l’ordre n’a pas d’importance (ingrédients, liens de menu), <ol> quand la séquence compte (étapes d’une procédure, classement).
Où WordPress s’appuie dessus
L’éditeur de blocs transforme un bloc « Liste » en <ul> ou <ol> selon le bouton choisi dans la barre d’outils. Beaucoup de composants natifs de WordPress sont eux-mêmes des listes : le menu de navigation généré par wp_nav_menu() produit un <ul> de <li>, tout comme la liste des commentaires via wp_list_comments(). Un thème qui remplace ces balises par des <div> stylées casse cette sémantique et l’accessibilité qui va avec.
Exemple
<ol>
<li>Installer WordPress</li>
<li>Choisir un thème</li>
<li>Publier un premier article</li>
</ol>On peut aussi imbriquer une liste dans un <li> pour créer des sous-niveaux, très utile dans un menu à tiroirs.
Pièges fréquents
- Mettre des puces CSS (
list-style) sur des<div>plutôt que d’utiliser une vraie liste : visuellement identique, invisible pour les technologies d’assistance. - Oublier qu’un
<li>doit toujours être un enfant direct de<ul>ou<ol>, jamais isolé ailleurs dans le document. - Utiliser
<ol>pour un menu de navigation où l’ordre n’a pas de sens sémantique particulier :<ul>suffit dans ce cas.