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 dans une liste, les peuvent indiquer un nombre d'éléments erroné.
<!-- Incorrect : les 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
Quand 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. Les éléments englobants placés dans la liste faussent ce comptage : l'exemple ci-dessus peut être annoncé comme une liste de deux éléments alors qu'elle en contient trois. Les menus de navigation sont les plus souvent touchés, car ils sont généralement construits sous forme de listes.
Comment corriger
- Supprimez les éléments englobants tels que
<div>ou<span>directement à l'intérieur des éléments<ul>et<ol>, afin que seuls des éléments<li>restent. - Si vous avez besoin d'un conteneur pour la mise en forme, placez-le à l'intérieur du
<li>, ou appliquez le style directement aux éléments<li>. - Pour imbriquer une liste dans une autre, placez le
<ul>ou<ol>interne à l'intérieur d'un<li>parent.
Comment Silktide teste cela
- Repère tous les éléments
<ul>et<ol>sur la page. - Examine chacun des enfants directs de la liste.
- Signale tout enfant qui n'est pas un élément de liste (
<li>) ou une liste imbriquée. Les commentaires et les espaces entre les éléments sont acceptés et ignorés.