何を入力する欄か、入力する前にわかるようにする。

05条件と補足

対象になる入力

申込フォームのような文字入力のほか、ラジオボタンやチェックボックスなど、利用者が値を入力・選択する部品も対象です。フォームの外に置かれた入力用の部品も含みます。データ入力に関係しないリンクや、単に開閉する部品は、この基準の対象ではありません。

ラベルと説明の選び方

必要なのは、入力のためのラベル又は説明を提供することです。すべての欄に、項目名と詳しい説明の両方を必ず付けるという要件ではありません。短い項目名で足りる場合もあれば、決まった日付の形式などを追加で知らせる場合もあります。

選択肢に付いたラベルだけで、何を選ぶ部品かがわかる場合もあります。それだけで目的が伝わらない場合は、選択肢の集まりにも見出しや説明を添えます。

必要なときに確認できる表示

この例では項目名と説明を常に表示しています。入力中も同じ場所で確かめられる方法として選びました。

基準はあらゆるラベルや説明を常時表示することまでは求めていません。操作の対象になったときに表示したり、説明を開くボタンを用意したりする方法もあります。必要なときにラベルや説明を確認できることが必要です。

入力すると消える入力例だけを、必要な項目名や説明の代わりにすると、後から内容を確かめられなくなります。消える入力例を使う場合も、必要なラベルや説明を確認する手段を用意します。

ほかの基準との違い

3.3.2では、入力のためのラベル又は説明が提供されているかを確認します。さらに、次の点も別々に確認します。

• 1.3.1「情報及び関係性」：項目名と入力欄の関係などを、ソフトにも伝えられるか。
• 4.1.2「名前 (name)・役割 (role)・値 (value)」：入力欄の名前や役割などを、読み上げソフトなどが取得できるか。
• 2.4.6「見出し及びラベル」：付けられた項目名がその目的を説明しているか。

例えば、読み上げ専用の名前だけを付け、画面上に必要なラベルや説明がない場合は、3.3.2を満たせないことがあります。図の「改善した例」では画面に項目名を表示し、入力欄との関連付けも行っています。

ここで示した改善例はメールアドレスの入力欄に関するものです。フォームやサイト全体のWCAG適合を示すものではありません。