フォームの説明
Silktide は、自由記述フィールドなど、説明が必要な可能性のあるフォームフィールドを検出し、それぞれに入力内容を示す説明が必要かどうかを判断するよう求めます。説明が必要なフィールドでは、単に近くに配置するのではなく、コード上で説明を関連付ける必要があります。
これが重要な理由
ラベルだけでは不十分なことがよくあります。「日付」では、国によって異なる想定形式が分かりません。「照会番号」では、3つある照会番号のうちどれを求めているのか分かりません。誤って推測した訪問者にはエラーが表示されます。さらに悪い場合、不正なデータのまま送信が受け付けられてしまいます。
説明を記述することと同じくらい、コード上で関連付けることも重要です。視覚的にフィールドの近くにあるだけのヒントは、入力欄にフォーカスしているの利用者には認識されません。
修正方法
フラグが付いた各フィールドについて、訪問者が何を入力すべきか迷う可能性があるかを判断します。可能性がある場合は、次のいずれかを行ってください。
- 説明を追加し、 の
aria-describedby属性を使用してフィールドに関連付けます。
<!-- フィールドがフォーカスを受けるとヒントが読み上げられます -->
<label for="date">日付</label>
<input type="text" id="date" aria-describedby="date-hint">
<p id="date-hint">形式: 日/月/年、例: 28/07/2026</p>
- または、専用の フィールドタイプを使用します。
<input type="date">は、訪問者のロケールに合わせた日付ピッカーを提供するため、説明は不要です。適切なタイプがある場合は、こちらを優先してください。
「検索」ボックスやお問い合わせフォームの「メッセージ」フィールドのように、フィールドの用途が明確な場合は説明は不要です。してください。
Silktide によるテスト方法
- 説明が役立つ可能性があるフォームコントロールを検出します。対象は
<textarea>要素、および type がtext、email、file、number、password、rangeの<input>フィールドです。ボタン、チェックボックス、ラジオボタン、ドロップダウンメニューは、通常ラベルだけで十分なため対象外です。 - 晴眼の利用者に表示されないフィールド、およびトラッキングスクリプトや翻訳スクリプトが独自の用途のために追加する非表示フォームなど、既知のサードパーティ製ウィジェットによって挿入されたフィールドを除外します。
- すでに説明が関連付けられているフィールドを除外します。つまり、実際に存在する空でないテキストを指す
aria-describedby、または空でないaria-description属性があるフィールドです。 - 残りの各フィールドにレビュー用のフラグを付けます。実際に説明が必要かどうかは人が判断します。
トラブルシューティング
フィールドのすぐ下にヒントがあります
視覚的に近いことは、関連付けを意味しません。ヒントが aria-describedby（または aria-description）によってフィールドに関連付けられていない限り、はそれを読み上げず、Silktide はフィールドにフラグを付けます。属性を追加すると、両方の問題が解決されます。