Listas semánticas
Silktide comprueba que los elementos de lista de tus páginas contengan únicamente elementos de lista como hijos directos. Cuando se colocan otros elementos directamente dentro de una lista, la puede informar incorrectamente de cuántos elementos contiene la lista.
<!-- Incorrecto: los div ocultan elementos a los lectores de pantalla -->
<ul>
<div class="group">
<li>Ejemplo 1</li>
</div>
<div class="group">
<li>Ejemplo 2</li>
<li>Ejemplo 3</li>
</div>
</ul>
<!-- Corregido: solo elementos de lista directamente dentro de la lista -->
<ul>
<li>Ejemplo 1</li>
<li>Ejemplo 2</li>
<li>Ejemplo 3</li>
</ul>
Por qué es importante
Cuando un entra en una lista, anuncia cuántos elementos tiene la lista - "lista, 3 elementos" - lo que informa a la persona usuaria de cuánto contenido esperar y le permite omitirlo con confianza. Los elementos contenedores dentro de la lista rompen ese recuento: el ejemplo anterior puede anunciarse como una lista de dos elementos cuando en realidad tiene tres. Los menús de navegación son las víctimas más habituales, ya que suelen construirse como listas.
Cómo solucionarlo
- Elimina los elementos contenedores como
<div>o<span>colocados directamente dentro de los elementos<ul>y<ol>, de modo que solo queden elementos<li>. - Si necesitas el contenedor para estilos, muévelo dentro del
<li>, o aplica estilos directamente a los elementos<li>. - Para anidar una lista dentro de otra, coloca la
<ul>o<ol>interna dentro de un<li>padre.
Cómo lo comprueba Silktide
- Encontrar todos los elementos
<ul>y<ol>de la página. - Examinar cada uno de los hijos directos de la lista.
- Marcar cualquier hijo que no sea un elemento de lista (
<li>) o una lista anidada. Los comentarios y los espacios en blanco entre elementos están bien y se ignoran.