フラグメントの有効なラベル ID
Silktide は、ID によって別の要素を参照するフォームラベルをチェックし、 その ID がページ上のどこにも存在しないラベルを報告します。何も指し示していないラベルは、 何かに名前を付けることができません。
では、<label> の for 属性にフォームフィールドの id を設定することで、
フォームフィールドに名前を付けます。このチェックでは、参照された ID がページ上のどこかに存在することだけを確認します。別のチェックである
有効なラベル ID では、
さらに進んで、対象がラベルを付けられるフォームフィールドであることを確認します。
<!-- 問題: ページ上のどこにも id="food" がない -->
<label for="food">好きな食べ物</label>
重要な理由
参照先が壊れたラベルは何も機能しません。 はそれをフィールドに関連付けられないため、 ラベルが本来名前を付けるはずだったフィールドは名前なしで読み上げられ、 ラベルをクリックしてもそのフィールドにフォーカスされなくなります。ページの見た目は変わらないため、 このような問題は、ID の名前変更やマークアップの再構成時に気付かれないまま発生しやすく、 自動チェックでのみ検出できます。
修正方法
- ラベルが説明するはずだった要素を見つけ、ラベルの
forの値をその要素の正確なidに設定します（ID は大文字と小文字を区別します）。
<!-- 修正済み: ラベルが実在する ID を指している -->
<label for="food">好きな食べ物</label>
<input type="text" id="food">
- 対象の要素に
idがない場合は、追加します。 - ラベルが不要になり、何も説明していない場合は、削除します。
Silktide によるチェック方法
- 各ページで、空でない
for属性を持つすべての<label>要素を見つけます。 idが一致する要素がページ上のどこかにあるかを確認します。- そのような要素が存在しない場合、ラベルを報告します。