dlitem-parent-valid

Los términos y las descripciones deben estar dentro de una lista de descripciones

automaticWCAG 1.3.1 (A)confianza: highgravedad: seriousperceivable

Comprueba que los elementos <dt>/<dd> estén contenidos en un <dl>, directamente o mediante un <div> envolvente.

Ámbito de aplicación. Se aplica a los elementos <dt>/<dd> que tienen un elemento padre en el árbol plano, tal como la página lo renderiza: un <dt>/<dd> asignado a un slot dentro de un <dl><slot></slot></dl> de shadow está en esa lista, y un <slot> intermedio se atraviesa. Un <dt>/<dd> que un shadow host no asigna a ningún slot no se renderiza y queda fuera.

Resultado esperado. El padre es <dl>, o el padre es un <div> cuyo propio padre es <dl> (se permite un único nivel de div envolvente, acorde con la forma habitual en que los autores agrupan los pares dt/dd). Un <dt>/<dd> usado fuera de un contenedor de lista de descripción real conserva su rol de término o de definición, pero ninguna lista lo empareja con la definición o el término que le corresponde. 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.

  • parentElement: el nombre de etiqueta del padre del elemento, el contenedor en el que está en lugar de un <dl>.

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>

Tanto dt como dd están dentro de un ancestro <dl>.

can't tell
<div>
<dt>orphan</dt>
</div>

<dt> no tiene ningún ancestro <dl>. Conserva su rol de término, así que que falle un criterio de WCAG depende de si la página lo muestra emparejado con una definición.

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.

DLITEM_INVALID_PARENT

  1. Inspeccione el <dt> o <dd> que indica el informe y compruebe que ningún <dl> lo contiene.
  2. 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.
  3. 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).

Ver código fuente