listitem-parent-valid
Los elementos de lista deben estar dentro de un contenedor de lista
Comprueba que los elementos <li> estén contenidos en <ul>, <ol>, <menu> o un elemento con role="list".
Ámbito de aplicación. Se aplica a elementos <li> que tienen un elemento padre.
Resultado esperado. El padre es <ul>/<ol>/<menu> sin rol que lo sustituya (los tres tienen el rol implícito list), o un elemento con un rol explícito "list", "directory" (obsoleto, pero un padre requerido de listitem en WAI-ARIA 1.2), "presentation" o "none". Un <li> usado fuera de un contenedor de lista real (por ejemplo, como elemento flex/grid genérico bajo un <div>) no se expone como elemento de lista a las tecnologías de asistencia. Devuelve fail donde la página sigue dibujando el <li> como un elemento de lista (display list-item con un marcador): un elemento que ve quien lee y que el marcado no pone en ninguna lista, una relación que no puede determinarse mediante programación (SC 1.3.1). Un <li> dibujado sin marcador, como una simple caja de diseño, no muestra ninguna lista, así que el modelo de contenido roto se informa como cantTell (H48 es solo una técnica suficiente) para que una persona diga si se lee como una lista. 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.
Qué informa un hallazgo.
reasonCode:LIST_ROLE_OVERRIDDENcuando el padre es un <ul>, <ol> o <menu> cuyo role explícito sustituye a list (<ul role="tablist">),LISTITEM_INVALID_PARENTen los demás casos. Ambos fallan donde el <li> se dibuja como un elemento de lista, y preguntan donde no.parentElement: el nombre de etiqueta del padre del<li>, el contenedor en el que está en lugar de una lista.parentRole: conLIST_ROLE_OVERRIDDEN, el rol del padre.parentElementes un contrato estable, a diferencia del resto dedata.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
<ul><li>Apple</li></ul>
<li> está dentro de un <ul>.
<div><li>Date</li></div>
<li> no tiene ningún ancestro <ul>/<ol>/role="list", y aun así el navegador lo dibuja con una viñeta: la página muestra un elemento de lista que el marcado deja fuera de cualquier lista.
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.
LISTITEM_INVALID_PARENT
- Inspeccione el <li> que indica el informe y anote su padre, que no es <ul>, <ol>, <menu> ni un elemento con rol list.
- Observe si la página lo muestra como un elemento de una lista, con viñeta o número, junto a otros elementos.
- Con un lector de pantalla, lea el contenido y anote si se anuncian una lista y su número de elementos.
Se cumple. El elemento no se muestra como un elemento de una lista, así que no falta en el marcado ninguna lista que muestre la página. Aun así, corrija el marcado: HTML solo permite <li> en una lista.
No se cumple. La página muestra el elemento como un elemento de una lista, pero el marcado no lo pone en ninguna lista, así que esa relación no se puede determinar mediante programación (WCAG 1.3.1).
LIST_ROLE_OVERRIDDEN
- Inspeccione el <li> que indica el informe y anote el rol que tiene su padre <ul>, <ol> o <menu> en lugar de list.
- Observe si la página lo muestra como un elemento de una lista, con viñeta o número, junto a otros elementos.
- Con un lector de pantalla, lea el contenido y anote si se anuncian una lista y su número de elementos.
Se cumple. El elemento no se muestra como un elemento de una lista, así que no falta en el marcado ninguna lista que muestre la página. Aun así, corrija el marcado: HTML solo permite <li> en una lista.
No se cumple. La página muestra el elemento como un elemento de una lista, pero el marcado no lo pone en ninguna lista, así que esa relación no se puede determinar mediante programación (WCAG 1.3.1).