definition-list-children-valid

Las listas de descripciones deben tener una estructura válida

automaticWCAG 1.3.1 (A)confianza: highgravedad: seriousperceivable

Comprueba que los elementos <dl> solo contengan directamente grupos <dt>/<dd> (opcionalmente envueltos en un <div>), <script>, <template> o <style>.

Ámbito de aplicación. Se aplica a elementos <dl> que tienen al menos un hijo directo de tipo elemento o texto no vacío directamente dentro de ellos.

Resultado esperado. Cada hijo directo de tipo elemento es <dt>, <dd>, <script>, <template>, <style>, o un <div> cuyos propios hijos pertenecen a ese mismo conjunto (se permite un único nivel de div envolvente, que es como los autores suelen agrupar los pares dt/dd). El texto no vacío directamente dentro del <dl> o de un <div> envolvente también es un hijo no válido. Si el conjunto aplanado contiene algún <dt> o <dd>, debe contener AMBOS (un dt sin dd o un dd sin dt desequilibrado no es válido) y, leído en orden, debe formar grupos de uno o más <dt> seguidos de uno o más <dd>: un <dd> antes del primer <dt> no tiene término, y un <dt> después del último <dd> no tiene definición. Un conjunto aplanado sin ninguno de los dos (una lista vacía, o una que solo contiene <script>, <template> o <style>) no es una infracción: el emparejamiento solo se exige a una lista que tiene elementos. Cualquier otro hijo directo o envuelto rompe la semántica de lista de descripciones en la que se apoyan las tecnologías de asistencia. Todos los hallazgos se informan como cantTell, no como fail. HTML-AAM da a <dt> y <dd> sus roles de término y definición estén donde estén, así que lo que pierde un modelo de contenido roto es el emparejamiento de términos con definiciones, que solo declaran la estructura y el orden del <dl>. Eso es un fallo de WCAG (SC 1.3.1) solo donde la página muestra el emparejamiento, y H40 es solo una técnica suficiente: eso lo decide una persona.

Qué informa un hallazgo.

invalidChildren: los hijos que no deberían estar en la lista, un nombre de etiqueta por hijo (#text para texto colocado directamente dentro). Vacío cuando el problema es un <dt>/<dd> ausente o mal ordenado.

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

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Los únicos hijos directos de <dl> son dt/dd.

can't tell

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
  <p>oops</p>
</dl>

El <p> es un hijo directo de <dl> que no es dt/dd (ni un envoltorio permitido). El término y la definición conservan sus roles, así que que falle un criterio de WCAG depende de si la página muestra un emparejamiento que el marcado rompe.

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.

`DL_DT_DD_ORDER`

Inspeccione la lista de descripción que indica el informe y anote la definición que va antes del primer término, o el último término sin definición después.
Observe cómo muestra la página los términos y las definiciones: si cada definición se muestra como perteneciente a un término, por su posición, sangría o estilo.
Con un lector de pantalla, lea el contenido y anote si cada definición se anuncia con el término al que pertenece.

Se cumple. La página no muestra ningún emparejamiento que el marcado pierda: los términos y las definiciones no se muestran como relacionados, o el marcado aún los empareja. Aun así, corrija el marcado: HTML no lo permite.

No se cumple. La página muestra una definición como perteneciente a un término con el que el marcado no la empareja, así que esa relación no se puede determinar mediante programación (WCAG 1.3.1).

`DL_INVALID_CHILD`

Inspeccione la lista de descripción que indica el informe y anote el hijo que no es un grupo <dt>/<dd>, un único <div> envolvente, un script, una plantilla ni un style, o el texto colocado directamente en ella.
Observe cómo muestra la página los términos y las definiciones: si cada definición se muestra como perteneciente a un término, por su posición, sangría o estilo.
Con un lector de pantalla, lea el contenido y anote si cada definición se anuncia con el término al que pertenece.

`DL_NO_DT_DD`

Inspeccione la lista de descripción que indica el informe y anote los términos sin definición o las definiciones sin término.
Observe cómo muestra la página los términos y las definiciones: si cada definición se muestra como perteneciente a un término, por su posición, sangría o estilo.
Con un lector de pantalla, lea el contenido y anote si cada definición se anuncia con el término al que pertenece.

Ver código fuente