duplicate-id

IDは一意である必要があります

automaticWCAG 4.1.1 (A)確度:high重大度:moderaterobust

空でないid属性の値がすべて、それぞれの文書またはシャドウツリー内で一意であることを確認します(WCAG 2.0/2.1の達成基準4.1.1。WCAG 2.2で削除)。

適用範囲:空でないid属性を持つすべての要素に適用されます。可視性は関係ありません。IDが重複していると、要素がレンダリングされるかどうかにかかわらず同じ参照が壊れるためです。ACT 3ea0c8が隠された要素も評価するのはこのためです。

期待される結果:同じツリー内で、ほかの要素が同じid値を持っていません。比較は書かれたとおりに厳密に行います(id="a "とid="a"は別のidです)。idのスコープは文書ツリーごと、シャドウツリーごとなので、異なる2つのシャドウルート内の同じidは重複ではありません。

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

  • reasonCode:要素が1つのシャドウツリー内にある場合はDUPLICATE_ID_IN_SHADOW_TREEです。シャドウツリーはスクリプトが構築するもので、ページが配信するマークアップには含まれません。それ以外はDUPLICATE_IDです。どちらも同じようにfailになります。
  • id:重複しているidです。
  • count:同じツリー内でそのidを持つ要素の数です。

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

例

pass
<div id="section-1">First</div>
<div id="section-2">Second</div>

各要素が異なるIDを持っています。

can't tell
<div id="section-1">First</div>
<div id="section-1">Second</div>

IDsection-1が同じツリー内の2つの要素で使われており、<label for>、フラグメントリンク、getElementByIdが正しく機能しません。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

DUPLICATE_ID

  1. レポートに示された要素を調べ、共有されているidを控えてください。
  2. そのidを参照しているもの(labelのfor、aria-labelledbyなどのaria-*属性、#the-idへのリンク)があるか確認してください。
  3. 参照しているものがあれば、その参照をたどり(ラベルやリンクをクリックするか、アクセシビリティペインで名前を読み)、意図された要素に届くことを確認してください。
  4. 監査が適用するWCAGのバージョンと規格を確認してください。WCAG 2.2、または2023年の正誤表を適用した2.0/2.1では、HTMLについて4.1.1は満たされます。

満たす場合:重複によって壊れるものはなく(参照は意図された要素に届き)、監査はWCAG 2.2または正誤表を適用した2.0/2.1を使っているため、4.1.1は満たされます。

満たさない場合:ラベル、ARIAの参照、またはリンクが誤った要素に届く(WCAG 1.3.1または4.1.2)か、EN 301 549 V3.2.1のように4.1.1の文言を維持する規格に基づく監査であり、その場合idの重複は4.1.1を満たしません(F77)。

DUPLICATE_ID_IN_SHADOW_TREE

  1. 同じシャドウルート内にある、レポートに示された要素を調べ、共有されているidを控えてください。
  2. そのidを参照しているもの(labelのfor、aria-labelledbyなどのaria-*属性、#the-idへのリンク)があるか確認してください。
  3. 参照しているものがあれば、その参照をたどり(ラベルやリンクをクリックするか、アクセシビリティペインで名前を読み)、意図された要素に届くことを確認してください。
  4. 監査が適用するWCAGのバージョンと規格を確認してください。WCAG 2.2、または2023年の正誤表を適用した2.0/2.1では、HTMLについて4.1.1は満たされます。

満たす場合:重複によって壊れるものはなく(参照は意図された要素に届き)、監査はWCAG 2.2または正誤表を適用した2.0/2.1を使っているため、4.1.1は満たされます。

満たさない場合:コンポーネント内のラベルまたはARIAの参照が誤った要素に届く(WCAG 1.3.1または4.1.2)か、EN 301 549 V3.2.1のように4.1.1の文言を維持する規格に基づく監査であり、その場合idの重複は4.1.1を満たしません(F77)。

ソースコードを見る