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 hijo directo de tipo elemento o texto no vacío (que no sea solo espacios en blanco) directamente dentro, y cuyo rol es list: sin atributo role, un atributo role que se resuelve en list (su primer token que nombra un rol conocido, sin distinguir mayúsculas de minúsculas), o uno que no nombra ningún rol ARIA conocido. Un <ul>/<ol> con otro rol (listbox, menubar, tablist, none, ...) no es una lista, así que sus hijos siguen las reglas de ese rol.

Resultado esperado. Todo elemento hijo directo es <li>, <script> o <template>. A MENOS que tenga un rol explícito (el primer token de su atributo role que nombra un rol conocido, sin distinguir mayúsculas de minúsculas), 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" o role="foo LISTITEM" es válido). Un atributo role que no nombra ningún rol conocido deja que decida la etiqueta. Un <div> contenedor usado solo para estilos (sin ningún rol) sigue rompiendo la semántica de la lista igual que antes. El texto no vacío (que no sea solo espacios en blanco) situado directamente dentro de la lista también es un hijo inválido: HTML solo permite ahí <li> y elementos de soporte de scripts, y el texto no pertenece a ningún elemento de lista. Un hijo que no corresponde devuelve fail solo donde la página muestra un elemento que el marcado pierde: el hijo se dibuja como un elemento de lista (display list-item con un marcador), o envuelve elementos <li> que lo son, que HTML-AAM no asigna entonces a ningún elemento de lista. Es una relación que se muestra y no puede determinarse mediante programación (SC 1.3.1). Cualquier otra cosa (un encabezado o un separador entre los elementos, texto suelto, un <li> cuyo rol sustituye a listitem sin marcador dibujado) rompe el modelo de contenido de HTML, y H48 es solo una técnica suficiente: se informa como cantTell, para que una persona diga si la página lo muestra como uno de los elementos. El marcador se lee del estilo calculado; jsdom no resuelve la propiedad abreviada list-style, así que allí un list-style: none puesto de ese modo se sigue leyendo como un marcador, y el hallazgo falla como habría fallado antes.

Qué informa un hallazgo.

reasonCode: LIST_ITEM_ROLE_OVERRIDDEN cuando todos los hijos que no deberían estar son elementos <li> cuyo role explícito sustituye a listitem (<li role="presentation">, role="none", role="group"...), y LIST_INVALID_CHILD para cualquier otro hijo: un elemento que no es un <li>, o texto. Una lista con ambos es LIST_INVALID_CHILD.
element: el nombre de etiqueta de la lista, ul u ol.
invalidChildren: los hijos que no deberían estar en la lista, un nombre de etiqueta por hijo (#text para el texto situado directamente dentro).
overriddenRoles: con LIST_ITEM_ROLE_OVERRIDDEN, el rol de cada uno de esos <li>, en orden.
element es un contrato estable, a diferencia del resto de data.details.

Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.

Ejemplos

pass

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

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

fail

<ul>
  <div>
    <li>Elderberry</li>
  </div>
</ul>

Un <div> entre el <ul> y su <li> deja el elemento con viñeta fuera de cualquier lista.

can't tell

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

Un <div> es hijo directo de <ul> junto con el <li>, pero no se dibuja como un elemento de lista: que falle un criterio de WCAG depende de si la página lo muestra como uno.

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

`LIST_INVALID_CHILD`

Inspeccione la lista que indica el informe y anote el hijo que no es un elemento de lista, un script ni una plantilla, o el texto colocado directamente en ella.
Observe cómo muestra la página el contenido que no corresponde: como uno de los elementos de la lista (con viñeta o número, o con el estilo de los elementos) o como otra cosa, por ejemplo un encabezado, un separador o texto suelto.
Con un lector de pantalla, lea la lista y anote cuántos elementos anuncia y si ese contenido se anuncia como uno de ellos.

Se cumple. El contenido no se muestra como uno de los elementos de la lista, así que no falta en el marcado ningún elemento que muestre la página. Aun así, muévalo dentro de un <li> o fuera de la lista: HTML no lo permite ahí.

No se cumple. La página muestra el contenido como uno de los elementos de la lista, pero el marcado no lo convierte en uno, así que esa relación no se puede determinar mediante programación (WCAG 1.3.1).

`LIST_ITEM_ROLE_OVERRIDDEN`

Inspeccione la lista que indica el informe y anote cada <li> cuyo atributo role sustituye a listitem.
Observe si la página sigue mostrando ese <li> como uno de los elementos de la lista, con viñeta o número o con el estilo de los demás.
Con un lector de pantalla, lea la lista y anote cuántos elementos anuncia y si ese contenido se anuncia como uno de ellos.

Ver código fuente