このルールがチェックする内容
ARIAおよびラベルに使用されているすべてのid属性の値が一意であることを確認してください.
なぜ重要なのか
ラベルや説明はidで要素を参照しているため、idが重複するとその関連付けが壊れます(WCAG 4.1.2)。
修正方法
- 各要素に固有のidを付け、それを参照する属性(for、aria-labelledby、aria-describedby)を更新します。
- Shopifyのセクションでは、繰り返し使われるセクションでもidが固有になるよう、idに{{ section.id }}を追加します。
修正の確認方法
- 再スキャンし、duplicate-idルールが合格することを確認します。
FixReportsが検出する方法
当社のスキャンは、テストする各ページで実際のChromeブラウザを使ってaxe-coreのルールduplicate-id-ariaを実行し、不合格の要素ごとに、そのページ、マークアップ、該当する場合はスクリーンショットを報告します。
自動テストで確認できるのは、この特定の問題が存在することです。ページのそれ以外の部分がアクセシブルかどうかはわかりません。人がページを確認して初めて見つかるバリアもあります。