definition-list-children-valid

説明リストは正しく構造化されている必要があります

automaticWCAG 1.3.1 (A)確度:high重大度:seriousperceivable

<dl>要素の直接の子が、<dt>/<dd>のグループ(1つの<div>で囲んでもよい)、<script>、<template>、<style>だけであることを確認します。

適用範囲:直接の子要素、または直下に空白以外のテキストを少なくとも1つ持つ<dl>要素に適用されます。

期待される結果:直接の子要素がすべて<dt>、<dd>、<script>、<template>、<style>、または自身の子要素が同じ集合から成る<div>です(作成者がdt/ddの組をまとめる一般的な方法に合わせ、ラップするdivは1階層まで認めます)。<dl>やラップする<div>の直下にある空白以外のテキストも、無効な子要素です。平坦化した集合に<dt>か<dd>が1つでもあれば、その両方を含む必要があり(ddのないdtやdtのないddのような不均衡は無効です)、順に読んで、1つ以上の<dt>の後に1つ以上の<dd>が続くグループになっている必要があります。最初の<dt>より前の<dd>には用語がなく、最後の<dd>より後の<dt>には定義がありません。どちらも含まない平坦化した集合(空のリスト、または<script>、<template>、<style>だけを含むリスト)は違反ではありません。組み合わせが求められるのは、項目を持つリストだけです。それ以外の直接の子要素やラップされた子要素は、支援技術が頼りにする説明リストのセマンティクスを壊します。

検出結果が報告する内容:

  • invalidChildren:リストに属さない子で、子ごとに1つのタグ名です(直接置かれたテキストは#text)。問題が<dt>/<dd>の欠落や順序の誤りである場合は空です。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

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

<dl>の直接の子はdt/ddだけです。

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

<p>が<dl>の直接の子になっていますが、dt/dd(または許可されたラッパー)ではありません。

ソースコードを見る