ラベル付けできないコントロールにラベルを使用しない
Silktide は、ID によって別の要素を指すフォームラベルをチェックし、ラベルを付けるべきではない要素（ボタン、ボタンのように動作する入力、およびラベルをまったく受け取れない要素）を対象とするラベルを報告します。これらの要素は独自のテキストまたは値によって名前が付けられるため、別のラベルを付けると名前が競合します。
では、<label> の for 属性によってフォームフィールドに名前を付けます。しかし、一部のコントロールはすでに独自の名前を持っています。ボタンの名前はそのテキストであり、送信 input の名前はその value です。単純な <div> や非表示の input など、そもそもこの方法でラベルを付けられない要素もあります。
<!-- 問題: ボタンにはすでに「Save」と表示されており、ラベルが競合する -->
<label for="save">Save</label>
<button id="save">Save</button>
重要な理由
コントロールの名前が、独自のテキストと、それを指すラベルという2つの情報源から取得される場合、異なるブラウザーやは競合を異なる方法で解決します。コントロールが2回読み上げられたり、誤ったテキストで読み上げられたり、ラベルをクリックしたときに予期しない動作をしたりする可能性があります。冗長なラベルを削除すると、すべての訪問者がコントロールに表示されている内容を正確に聞けるようになります。
修正方法
- ボタンおよびボタンのように動作する入力では、
<label>を削除し、コントロール自体のテキストまたはvalueを使用します。
<!-- 修正後: ボタン自身が名前を持つ -->
<button id="save">Save</button>
<input type="submit" value="Submit">
- 非表示の input を指すラベルは削除します。非表示フィールドは表示も読み上げもされないため、名前を付ける必要はありません。
<div>をカスタムコントロールとして使用する場合など、フォーム要素ではないものにラベルを付けていた場合は、代わりに を使用します。要素に、名前を付けるテキストを指すaria-labelledbyを指定してください。
Silktide によるチェック方法
- 各ページで、
for属性を持つすべての<label>要素を見つけます。 idが一致する要素を検索します。存在しない ID を指すラベルはここではスキップされ、代わりに有効なラベル IDで報告されます。- ラベルの対象が次のいずれかの場合、そのラベルを報告します。
<button>要素- type が
button、submit、reset、image、またはhiddenの<input> <div>や見出しなど、ラベルを受け取れない要素
- 通常のフィールド（テキスト入力、
<select>、<textarea>など）を指すラベルは合格とします。