list-children-valid

Las listas solo deben contener elementos de lista como hijos directos

automaticWCAG 1.3.1 (A)confianza: highgravedad: seriousperceivable

Comprueba que los elementos <ul>/<ol> solo tengan <li>, <script> o <template> como hijos directos.

Ámbito de aplicación. Se aplica a elementos <ul>/<ol> que tienen al menos un elemento hijo directo.

Resultado esperado. Todo elemento hijo directo es <li>, <script> o <template>. A MENOS que tenga un atributo `role` explícito, en cuyo caso el rol explícito prevalece por completo sobre la etiqueta: un hijo es válido si y solo si ese rol es "listitem" (por lo que `<li role="presentation">`/`<li role="menuitem">` son inválidos a pesar de la etiqueta <li>, y a la inversa, un elemento que no sea <li> al que se le asigne explícitamente `role="listitem"` es válido). Un <div> contenedor usado solo para estilos (sin ningún rol) sigue rompiendo la semántica de la lista igual que antes.

Ejemplos

pass
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>

Los únicos hijos directos de `<ul>` son `<li>`.

fail
<ul>
<li>Elderberry</li>
<div>wrapper</div>
</ul>

Un `<div>` es hijo directo de `<ul>` junto con el `<li>`.

Ver código fuente