a11y/no-duplicate-dt · <dl> 内の <dt> 名の重複

1つの dl 要素の中で、同じ名前の dt 要素は複数あるべきではありません。重複した用語はたいてい、2つの説明が1つの dt を共有するはずだったコピペミスです。

重大度: info · カテゴリ: a11y

チェック内容

同じ <dl> 内で、先行する <dt> とテキストが重複する <dt> を検出します。

<dl>
  <dt>Coffee</dt>
  <dd>Hot, brewed</dd>
  <dt>Coffee</dt>
  <dd>Iced, cold brew</dd>
</dl>

用語の名前は静的なテキスト内容です。静的なフレージングマークアップは透過するので <dt><code>HTTP</code></dt> と <dt>HTTP</dt> は同じ名前になり、コメントは何も寄与しません。名前は前後の空白を除去し内部の空白を1つに圧縮したうえで、大文字小文字を区別して比較します（仕様は同一性の定義を置いていないため、確実な重複だけを報告します）。<div> でラップした name-value グループの形式も対象です: <dl> 直下の <div> の直接の子である <dt> も参加します。スコープは <dl> ごとに独立しており、別々のリストに同じ用語があっても問題なく、<dd> の中に入れ子になった <dl> は単独で判定されます。

検出しないもの:

動的な内容を持つ <dt>。配下のどこかに {式}・コンポーネント・ブロック・カスタム要素の子があると名前が判定不能です。
logic block({#if}、{#each} など)配下やコンポーネント内の <dt>。出現回数や内容が判定不能です。
空または空白のみの <dt>。空の用語が2つあるのは内容欠落という別の欠陥であって、名前の重複ではありません。
<svg> 内の <dl>。HTML の説明リストとしてレンダリングされることはありません。

なぜ重要か

HTML 仕様は、1つの dl 要素の中で同じ名前の dt 要素は複数あるべきではないと明記しています。実際のところ重複した用語はほぼ確実にコピペミスで、1つの <dt> には複数の <dd> を続けられるので、2つの説明は1つの用語を共有するはずだったものです。

修正方法

説明を1つの <dt> の下にまとめます。

<dl>
  <dt>Coffee</dt>
  <dd>Hot, brewed</dd>
  <dd>Iced, cold brew</dd>
</dl>

項目が本当に別物なら、どちらかの用語を変えてください。

モードによる違い

ありません。このルールが読むのは同じ .svelte / .ts のソースファイルなので、CLI、Vite プラグインのビルド、ライブダッシュボードの静的ベースラインのいずれでも結果は同一で、レンダリング済み HTML の解析で再評価されることもありません。--route で実行範囲を絞ると、このルールは動きません。コンポーネントスコープのルールには、検出を紐づけるルートが無いためです。

無効化

重複が意図したものなら、 で個別の要素を抑制するか、ルールを無効化してください。

export default {
  rules: {
    'a11y/no-duplicate-dt': 'off'
  }
};