ラベル関連付けの一意性

Silktide は、ID を使ってフォームフィールドを示すラベルをチェックし、別のラベルと同じ ID を共有しているラベルを報告します。各フィールドには、それを指すラベルがちょうど 1 つだけあるようにしてください。そうすれば、常に同じ方法で読み上げられます。

では、ラベルの for 属性にフィールドの id を設定することで、<label> がフォームフィールドに関連付けられます。2 つ以上のラベルが同じ for 値を使用している場合、すべてのラベルが同じフィールドを指すことになります。これは通常、フォームをコピーして貼り付けた後に ID を更新していないことが原因です。

<!-- 問題: どちらのラベルも id="name" を指している -->
<label for="name">Your name</label>
<input id="name">

<label for="name">Company name</label>
<input id="company">

重要な理由

は、フィールドについてどのラベルを読み上げるか選ばなければなりません。また、異なるは異なる選択をします。最初のラベルだけを読むものもあれば、両方を読むものもあります。一方、2 番目のラベルが本来指すはずだったフィールドにはラベルがまったくないため、名前のないフィールドとして読み上げられます。ラベルをクリックするとそのフィールドにもフォーカスが移るため、「Company name」をクリックした訪問者が、間違った入力欄に入力してしまう可能性もあります。

修正方法

すべてのフォームフィールドに、それぞれ一意の id を付けます。
各ラベルの for 属性を、そのラベルが説明する 1 つのフィールドの ID に指定します。

<!-- 修正後: 各ラベルがそれぞれのフィールドを指している -->
<label for="name">Your name</label>
<input id="name">

<label for="company">Company name</label>
<input id="company">

複数のテキストが 1 つのフィールドを実際に説明している場合は、<label> を 1 つだけ残し、2 つ目のラベルを追加する代わりに aria-describedby で追加のテキストを関連付けます。

Silktide によるテスト方法

各ページで、for 属性を持つすべての <label> 要素を見つけます。
for の値ごとにラベルをグループ化します。
2 つ以上のラベルが同じ値を共有している場合、そのグループ内のすべてのラベルを報告します。

トラブルシューティング

ラベルが別々のフォームにある場合

ID は、1 つのフォーム内だけでなくページ全体で一意でなければなりません。同じページにある 2 つのフォームに、それぞれ <label for="email"> が含まれている場合も競合します。signup-email や newsletter-email のように、ID の名前を変更して異なるものにしてください。