フォーム・コントロールの補足説明　［フォーム］

必須項目、入力方法、入力可能な値などを示すテキストは、<label>要素または<legend>要素内に含めているか

  • 入力例や入力方法には、placeholder属性やaria-describedby属性を用いることができる。

解説

テキストフィールドのようにユーザーに入力を求めるフォーム・コントロールでは、ユーザーが入力ミスをしないように、入力するために必要なラベルや説明文を提供します。

例えば、必須項目であること、入力すべき書式や入力可能な値などは、フォーム・コントロールのラベルで明示することによって、ユーザーによる入力ミスの発生を最低限に抑えることができます。

ユーザーの入力ミスによりエラーが発生してしまうと、場合によってはユーザーがそのエラーを修正することができずに途中であきらめてしまい、フォーム送信を完了できない可能性が生じます。特に、障害のあるユーザーは、入力をミスしてしまうことが多かったり、修正するのに時間を要してしまったりすることがあります。

また、障害の有無に関係なく、何をどのように入力すべきかが分かりにくい入力フォームは、全てのユーザーにとってフォーム送信のタスクを完了しづらいものにしてしまいます。

ユーザーが入力をミスしないように、フォームへの入力とフォームの送信というタスクを完了するための補足説明を、できるだけ簡潔に分かりやすく提供しましょう。

そういった補足説明が、ラベルと一緒に提供されている場合は、<label>要素や<legend>要素でラベルと一緒にマークアップします。あるいは、ラベルとは離れた位置で提供されている場合には、aria-describedby属性を用いることができます。

事例 1. <label>要素

悪い例 1.


<div class="required"><label for="name">名前</label>［必須］</div>

<input type="text" required id="name" ...>

必須項目であることを示しているテキストが<label>要素内にない。

良い例 1.


<label for="name" class="required">名前［必須］</label>

<input type="text" required id="name" ...>

必須項目であることが<label>要素でマークアップされている。

事例 2. aria-describedby属性

悪い例 2.


<label for="tel" class="required">名前［必須］</label>

<input type="text" required id="tel" ...>

<p>ハイフンなしで入力してください。例　01234567890</p>

テキストフィールドの直後にある補足説明が単にパラグラフとしてマークアップされているだけで、テキストフィールドの<input>要素と関連付けられていない。

例えば、スクリーンリーダー使用時に、テキストフィールドにフォーカスを移動させたときには、補足説明を読み上げないので入力エラーを引き起こしてしまう可能性がある。

スクリーンリーダーによる読み上げ例

「名前　必須　のエディット」

良い例 2.


<label for="tel" class="required">名前［必須］</label>

<input type="text" required id="tel" aria-describedby="hint">

<p id="hint">ハイフンなしで入力してください。例　01234567890</p>

aria-describedby属性を用いて、テキストフィールドの<input>要素と補足説明の<p>要素とを関連付けている。

このようにaria-describedby属性を用いることによって、例えばスクリーンリーダーでは、フォーム・コントロールがフォーカスを受け取ると、ラベルのテキスト、フォーム・コントロールの種類、補足説明文の順で読み上げることができる。つまり、入力や選択をする前に、補足説明文もより確実に確認することができるようになる。

スクリーンリーダーによる読み上げ例

「名前　必須　のエディット　ハイフンなしで入力してください。　例　01234567890」

WCAG 2.0の達成基準

3.3.2　ラベル又は説明文（レベル A）
コンテンツが利用者の入力を要求する場合は、ラベル又は説明文が提供されている。

WCAG 2.0「ガイドライン 3.3 入力支援」

参考