有効なラベル ID

Silktide は、ID を使ってフィールドを示しているフォームラベルをチェックし、その ID がページ上に存在し、実際にラベルを付けられる要素に属していることを確認します。何も示していないラベルや、誤った種類の要素を示しているラベルは、フィールドを気付かれないまま名前のない状態にします。

では、<label> とフォームフィールドは、ラベルの for 属性にフィールドの id を設定することで関連付けられます。ID の入力を誤った場合、フィールドの ID が変更された場合、または対象がフォームフィールドではない場合、この関連付けは壊れます。

<!-- 問題: id="fullname" を持つ要素が存在しない -->
<label for="fullname">氏名</label>
<input type="text" id="full-name">

重要な理由

ラベルは、がフィールドを読み上げるためのものです。 for の参照が壊れていると、ラベルとフィールドは関連のない 2 つの要素になります。そのため、利用者には名前のない「編集テキスト」として聞こえ、何を入力すべきか推測しなければなりません。見た目には何も変わらず、ラベルはフィールドの横に表示されたままなので、このような問題は、関連付けを必要とする人がフォームを使おうとするまで気付かれないことがあります。

修正方法

ラベルが対象としていたフィールドを見つけ、ラベルの for の値をフィールドの id と完全に一致させます（ID は大文字と小文字を区別します）。

<!-- 修正済み: 参照先がフィールドの id と一致している -->
<label for="full-name">氏名</label>
<input type="text" id="full-name">

ラベルが、ラベルを付けられないもの（カスタムコントロールとして機能する <div> など）を示している場合は、代わりにを使用します。要素に aria-labelledby を付け、名前を示すテキストを参照させます。
ラベルが不要になっており、対応するフィールドがない場合は削除します。

Silktide によるチェック方法

各ページで for 属性を持つすべての <label> 要素を見つけます。
for の値と一致する id を持つ要素を検索します。
そのような要素が存在しない場合、そのラベルを報告します。
要素が存在する場合、対象がラベルを付けられるフォーム要素でなければ、そのラベルを報告します。対象には、ボタン、入力（hidden を除く）、ドロップダウン、テキストエリア、メーター、出力、プログレスバーが含まれます。

トラブルシューティング

フィールドがスクリプトによって追加される

Silktide は、レンダリングされた状態の各ページを調査します。たとえばパネルを開いた後など、ページの一部の状態でしか対象フィールドが存在しない場合、チェック時にラベルの対象が見つからないことがあります。ラベルとそのフィールドを一緒にレンダリングすることを検討してください。