フィールドラベル

Silktideは、ページ上のすべてのフォームフィールドとボタンに、ソフトウェアが読み取れる名前があることをチェックします。フォームを見られない人は、各フィールドで何を求められているかを知るために、これらの名前を利用します。

目の見える訪問者は、フィールドの近くにあるテキストからその意味を判断します。しかし、この視覚的な関連付けはコード上では意味を持ちません。名前はフィールド自体に関連付ける必要があり、ほとんどの場合はの<label>要素を使用します。

<!-- 問題: テキストはラベルのように見えるが、フィールドに関連付けられていない -->
<p>氏名</p>
<input type="text">

重要な理由

訪問者がフォーム内を移動すると、は各フィールドのを読み上げます。名前のないフィールドは単に「テキストを編集」と読み上げられるため、訪問者は文脈から何を入力すべきか推測しなければなりません。長いフォームでは、これはすぐに不可能になります。ラベルのないフィールドは、視覚に頼らずフォームを完了できない最も一般的な原因の一つであり、登録、注文、お問い合わせの損失につながります。

修正方法

各フィールドに<label>を関連付けます。IDでリンクするか、フィールドをラベルで囲みます。

<!-- IDでリンクする -->
<label for="name">氏名</label>
<input type="text" id="name">

<!-- またはフィールドをラベルで囲む -->
<label>氏名 <input type="text"></label>

ボタンはテキストまたはvalueによって自ら名前を持つため、label要素は不要です。

<button>メッセージを送信</button>
<input type="submit" value="メッセージを送信">

表示されるラベルを設けることが難しい場合は、aria-labelやaria-labelledbyなどの属性を使用します。ただし、これはにのみ有効であり、目の見える訪問者には表示されません。

placeholderテキストをラベルとして使用しないでください。訪問者が入力を開始するとすぐに消え、名前として一貫して扱われないためです。

Silktideによるテスト方法

各ページのフォームコントロール（入力欄、テキストエリア、ドロップダウン、ボタン）と、ARIAでフォームコントロールのロールが指定された要素（role="button"やrole="checkbox"など）を検出します。
名前を必要としないコントロールはスキップします。これには、非表示の入力欄、既知のサードパーティ製ウィジェットによって挿入されたフィールド（サービスや、トラッキング・翻訳スクリプトが独自の用途のために追加する非表示フォームなど）、およびラベルを必要としないARIAロールを持つ要素が含まれます。
ラベル、ARIA属性、ボタンテキスト、または値から、各コントロールのアクセシブルな名前を特定します。
アクセシブルな名前が空の各コントロールを報告します。

トラブルシューティング

フィールドの横にテキストがある

近くにあるテキストは、コード上で関連付けられていない限りフィールドの名前にはなりません。for属性を持つ<label>を使用するか、ラベルでフィールドを囲んでください。

フィールドが装飾用である、またはプラグインによって管理されている

自分で管理していないウィジェットによって挿入されたフィールドは、直接修正することが困難な場合があります。プラグインにアクセシビリティ設定または更新があるか確認してください。フィールドが実際に訪問者へ影響しない場合は、この検出結果をできます。