definition-list-children-valid

Les listes de description doivent être correctement structurées

automaticWCAG 1.3.1 (A)confiance : highgravité : seriousperceivable

Vérifie que les éléments <dl> ne contiennent directement que des groupes <dt>/<dd> (éventuellement enveloppés dans un <div>), <script>, <template> ou <style>.

Applicabilité. S’applique aux éléments <dl> qui ont au moins un enfant élément direct ou du texte non blanc directement à l’intérieur.

Attendu. Chaque enfant élément direct est <dt>, <dd>, <script>, <template>, <style>, ou un <div> dont les enfants appartiennent à ce même ensemble (un seul niveau de div englobant est permis, ce qui correspond à la façon dont les auteurs regroupent couramment les paires dt/dd). Du texte non blanc directement dans le <dl> ou dans un <div> englobant est aussi un enfant non valide. Si l’ensemble aplati contient au moins un <dt> ou <dd>, il doit contenir LES DEUX (un dt sans dd ou un dd sans dt déséquilibré n’est pas valide) et, lu dans l’ordre, former des groupes d’un ou plusieurs <dt> suivis d’un ou plusieurs <dd> : un <dd> avant le premier <dt> n’a pas de terme, et un <dt> après le dernier <dd> n’a pas de définition. Un ensemble aplati sans aucun des deux (une liste vide, ou qui ne contient que des <script>, <template> ou <style>) n’est pas une violation : l’appariement n’est exigé que d’une liste qui a des éléments. Tout autre enfant direct ou englobé rompt la sémantique de liste de descriptions sur laquelle s’appuient les technologies d’assistance.

Ce que rapporte un constat.

  • invalidChildren : les enfants qui n’ont pas leur place dans la liste, un nom de balise par enfant (#text pour du texte placé directement à l’intérieur). Vide lorsque le problème est un <dt>/<dd> manquant ou mal ordonné.

Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.

Exemples

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

Les seuls enfants directs du <dl> sont des dt/dd.

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

Le <p> est un enfant direct de <dl> qui n’est ni un dt/dd ni un wrapper autorisé.

Voir le code source