入力欄の補足説明を関連付ける：項目名と入力のヒントを分けよう

入力条件は書いてあるのに、どの欄の説明か分かりづらい。入力欄の補足説明を関連付けるときは、項目名を示すlabelを残し、説明文への参照を別に用意します。今回は一つの欄と短い補足だけを作ります。

題材は架空の作品応募ページです。「作品名」と「展示カードに載せる名前を入力してください」を分けます。送信機能や入力値の検証は含まない練習用の断片で、実際の応募を受け付けるものではありません。

項目名と、入力を助ける説明を書き分ける

項目名には「何を入れるか」、補足には「その値をどう使うか」を書きます。今回ならlabelは「作品名」、補足は展示カードへの掲載用途です。説明をすべて項目名へ詰めるより、それぞれの役割を確かめやすくなります。

入力例だけを欄の中に置くと、入力中に見直せません。今回の補足は欄の外に常に表示します。labelの基本は入力後も項目名を残す記事で扱っています。ここでは、その名前に加える説明の対応を確認します。

入力欄から、説明文のidを参照する

次のHTMLを練習用ページのbody内に置きます。inputのidと、補足文のidには異なる名前を付けます。

<label for="work-title">作品名</label>
<p id="work-title-help">展示カードに載せる名前を入力してください。</p>
<input id="work-title" name="workTitle" type="text"
       aria-describedby="work-title-help">

labelのforは入力欄のwork-titleを指し、aria-describedbyは説明文のwork-title-helpを指します。後者の値にはシャープ記号を付けません。ページ内リンクのhrefとは書き方が違うので、コピーする際に注意してください。

MDNのaria-describedbyの説明では、説明を持つ要素のidで関連を示すことを確認できます。項目の名前を付け直す属性ではないため、labelを取り除かずに使います。

コピーした欄が、別の説明を指していないか調べる

よくある間違いは、欄を複製して作品名を「作者名」に変えたのに、補足の参照先を変え忘れることです。画面に正しい説明が見えても、参照先には前の文章が残っているかもしれません。

修正では、作者名の入力欄と説明文にそれぞれ新しいidを付け、labelとaria-describedbyの値も対応させます。一つのページで同じidを重ねず、参照先が実際に存在することを確認します。別ページのURLをこの属性へ入れる方法ではありません。

補足を長くしすぎないことも大切です。応募要項全文を関連付ける代わりに、入力直前に必要な短い説明を選びましょう。説明文を変えたら、項目名と並べて読み、矛盾や同じ文の繰り返しがないか見直します。

項目名と補足、それぞれの参照先をたどる

まず仮の作品名を入力し、項目名と補足の両方が残るか確認します。次にソースでfor、inputのid、aria-describedby、説明文のidを指して、二組の対応をたどってください。

読み上げ環境を使える場合は、入力欄へ移動したときに項目名と説明を確認します。読み上げのタイミングは環境や設定にもよるため、使ったブラウザーと支援技術を記録します。使えない場合は、参照を調べたことと読み上げを試したことを区別して残しましょう。

最後に補足を二行になる長さへ替え、狭い画面でも途中で欠けないか見ます。無料レッスンの練習ページに欄を一つ加え、入力後の表示と二組の参照を確認できれば、今回の課題は完了です。