duplicate-id-aria

ARIAで参照されるIDは一意である必要があります

automaticWCAG 4.1.2 (A)確度:high重大度:seriousrobust

ARIAのID参照属性(aria-labelledby、aria-describedby、aria-owns、aria-controls、aria-activedescendant、aria-flowto、aria-errormessage、aria-details)で参照されるidの値が、文書内で一意であることを確認します。

適用範囲:文書に、空でないaria-labelledby、aria-describedby、aria-owns、aria-controls、aria-activedescendant、aria-flowto、aria-errormessage、aria-details属性が少なくとも1つある場合(つまり解決すべきARIAのID参照が少なくとも1つある場合)に適用されます。

期待される結果:これらの属性で参照されるidの値のそれぞれについて、そのidを持つ要素が文書内にちょうど1つあります。重複していても参照は壊れません。ツリー順で最初の要素に解決されるため、名前は引き続き算出されます。その要素が意図したターゲットかどうかは作成者の意図次第で、マークアップにはその情報がないため、判定結果はcantTellになります。

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

  • id:ARIA属性が参照している、重複したidです。
  • duplicateCount:文書内でそのidを持つ要素の数です。

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

例

pass
<span id="lbl">Name</span>
<input type="text" aria-labelledby="lbl">

IDlblは一意なので、参照は曖昧さなく解決されます。

can't tell
<span id="lbl">Name</span>
<span id="lbl">Duplicate</span>
<input type="text" aria-labelledby="lbl">

aria-labelledby="lbl"はそのIDを持つ最初の要素に解決されます。それが意図したターゲットかどうかは作成上の問題で、マークアップからは判断できません。

確認方法

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

DUPLICATE_ID_ARIA_REFERENCED

  1. レポートに示された要素を調べ、ARIA属性と、それが参照する重複したidを控えてください。
  2. 開発者ツールでマークアップからid="the-id"を検索し、それを持つ各要素とそのテキストを控えてください。ブラウザーは最初のものを使います。
  3. 参照元の要素についてブラウザーの開発者ツールでアクセシビリティペインを開き、得られる名前または説明を読んでください。
  4. それを画面上で要素の隣にあるテキスト(たとえば、その要素自身のカードのタイトル)と比べてください。

満たす場合:名前または説明が意図された要素から得られているか、重複しているすべての要素が同じテキストを持っています。

満たさない場合:参照元の要素が誤った要素からテキストを得ています。たとえば、カード2にカード1のタイトルで名前が付いており、WCAG 4.1.2(および1.3.1)を満たしません。

ソースコードを見る