3.3.2 ラベル又は指示 レベルA 原則3 理解可能
消えるヒント、名前のない入力欄
入力欄の中にうすく「例: 2」と書いてあるだけのフォーム。すっきり見えますが、文字を入れたとたんにその説明は消えます。あとで見直したとき、どの欄に何を入れたのか分かるでしょうか。
さわってみよう
3つの欄に入力してみよう。入力したあと、2つ目の欄が何を書く欄だったか答えられるかな。
ためしてみる
欄をクリックするか Tab キーで移動すると、下に「読み上げのまね」が出ます。
読み上げのまね
目の見えない人が使う読み上げソフトは、欄に移ると「何の欄か」を声で伝えます。ラベルが結びついていないと、名前を読めません。ソフトによってはうすい字の「例: 2」を代わりに読むこともありますが、それでも「学年」という欄の名前は伝わりません。
答え：3つの欄は何だった？
上から「学年」「組」「出席番号」です。「2」「3」「12」と数字だけが並ぶと、書いた本人でも見分けがつきません。
直してみよう
3つの欄に見えるラベルを付けて、欄と結びつけよう。そのあと見本の欄に入力して、入力中もラベルが見えていることを確かめよう。
ラベルを付ける
1つ目の欄の HTML
読み上げのまね
見本の欄に移ると、ここに読み上げ文が出ます。
分かったこと
- 入力欄には、何を入れるかが分かるラベルか指示を付ける。これが 3.3.2 の求めていること。
- 欄の中のうすい字（プレースホルダー）は、入力を始めると消える。ラベルの代わりにせず、入力例などの補足にとどめる。
- 見えるラベルを
<label for="…">で欄と結びつけると、読み上げソフトが「入力欄「学年」」と名前を読める。ラベルの文字を押すと欄に移れるので、押せる範囲も広がる。結びつけは 1.3.1、読み上げられる名前は 4.1.2 で求められている。 - 見えるラベルと、プログラムが読む名前は同じ言葉にそろえる。音声で「学年」と言って操作する人がいるため（2.5.3 ラベルを含む名前）。
どこまでが 3.3.2 で、どこからが別の基準なのかは、WCAG 2.2 の日本語訳で確かめよう。