重複した ID
Silktide は、同じ id 値が複数の要素に使用されているページを検出します。ページ内では ID は一意でなければなりません。ID を参照するもの（フォームラベル、ARIA の関係、ページ内リンクなど）は、重複した ID のうち 1 つしか見つけられないためです。
<!-- 2 つの入力欄が id="name" を共有しています。それぞれのラベルはどのフィールドを説明しているのでしょうか？ -->
<label for="name">氏名</label>
<input id="name">
<label for="name">会社名</label>
<input id="name">
重要な理由
は、関連する要素を結び付けるために ID 参照に依存します。
ID が重複していると、 はフォームフィールドに誤ったラベルを読み上げたり、ラベルをまったく読み上げなかったりする可能性があります。上の例では、両方のフィールドが「氏名」と読み上げられる可能性があるため、ユーザーが会社名の欄に自分の氏名を入力してしまいます。同じ問題は、aria-labelledby や aria-describedby などの 属性や、#id に移動するページ内リンクにも影響します。
修正方法
- 重複している ID の名前を変更し、ページ上のすべての
idが一意になるようにします。また、それらを参照しているもの（for属性、ARIA 属性、リンク）も更新します。 - 重複が、ページ内で複数回生成されるテンプレートなどの繰り返しコンポーネントに由来する場合は、一意の ID を生成するようテンプレートを修正します。参照する必要のないスタイル指定用のフックには、ID の代わりにクラスを使用することもできます。
- 検出された重複が、実際には使用状況において問題ない場合は、この検出結果を無視できます。
Silktide によるチェック方法
- ページ上で
id属性を持つすべての要素を検出します。SVG グラフィック内の要素は、ID が別のコンテキストに存在するため除外されます。 - 要素を
idの値ごとにグループ化します。 - 同じ
idを共有する要素が複数ある場合、それぞれにフラグを付けます。