Listes sémantiques
Silktide vérifie que les éléments de liste sur vos pages ne contiennent, comme enfants directs, que des éléments de liste. Lorsque d’autres éléments sont placés directement à l’intérieur d’une liste, la peut indiquer de façon erronée combien d’éléments la liste contient.
<!-- Faux : les balises <div> masquent des éléments aux lecteurs d’écran -->
<ul>
<div class="group">
<li>Exemple 1</li>
</div>
<div class="group">
<li>Exemple 2</li>
<li>Exemple 3</li>
</div>
</ul>
<!-- Corrigé : uniquement des éléments de liste directement dans la liste -->
<ul>
<li>Exemple 1</li>
<li>Exemple 2</li>
<li>Exemple 3</li>
</ul>
Pourquoi c’est important
Lorsqu’un entre dans une liste, il annonce combien d’éléments elle contient — "liste, 3 éléments" — ce qui indique à l’utilisateur la quantité de contenu à prévoir et lui permet de la passer en toute confiance. Des éléments englobants à l’intérieur de la liste faussent ce décompte : l’exemple ci-dessus peut annoncer une liste de deux éléments alors qu’elle en contient trois. Les menus de navigation sont les principales victimes, puisqu’ils sont habituellement construits sous forme de listes.
Comment corriger
- Retirez les éléments englobants tels que
<div>ou<span>directement à l’intérieur des éléments<ul>et<ol>, afin qu’il ne reste que des éléments<li>. - Si vous avez besoin de l’élément englobant pour la mise en forme, déplacez-le à l’intérieur du
<li>, ou appliquez le style directement aux éléments<li>. - Pour imbriquer une liste dans une autre, placez la
<ul>ou<ol>interne à l’intérieur d’un<li>parent.
Comment Silktide teste ceci
- Trouver chaque élément
<ul>et<ol>sur la page. - Examiner chacun des enfants directs de la liste.
- Signaler tout enfant qui n’est pas un élément de liste (
<li>) ou une liste imbriquée. Les commentaires et les espaces blancs entre les éléments sont acceptés et ignorés.