「それ、なんて書いてある？」をブラウザに伝える魔法。dl要素とaria-describedbyでアクセシビリティを極める
Web制作を始めたばかりの皆さん、こんにちは！
フォームを作っているとき、「この入力欄、何を書けばいいのかヒントを出したいな」と悩んだことはありませんか？ 小さな文字で補足説明を添えることはよくありますが、実は「見た目で分かればいいや」と放置してしまうと、画面読み上げソフト（スクリーンリーダー）を使っている方には、その大切なヒントが届かないことがあります。
今日は、HTMLの「リストタグ」の意外な実力と、HTMLの「おもてなし機能」である`aria-describedby`を組み合わせて、誰にとっても使いやすいフォームを作る方法を解説します！
—
そもそも「dl, dt, dd」ってどんな関係？
まずは基本の復習です。リストといえば`ul`（箇条書き）や`ol`（番号付き）が有名ですが、`dl`はちょっと毛色が違います。
- `dl` (Definition List)：説明リストの親玉です。
- `dt` (Definition Term)：用語（見出し）。
- `dd` (Definition Description)：説明文。
これを身近な例に例えると、「辞書」です。
`dt`が見出し語で、`dd`がその意味ですよね。あるいは、お買い物の明細書も分かりやすいかもしれません。`dt`が「商品名」、`dd`が「価格」です。
この「ペアになっている関係性」をブラウザに正しく伝えることで、情報の構造が驚くほどスッキリします。
—
なぜ「aria-describedby」が必要なの？
さて、本題です。例えば「パスワード」を入力する欄の下に、「8文字以上で入力してください」という注意書きがあるとします。
視覚的にはすぐ近くにあるので分かりますが、視覚障害のある方がスクリーンリーダーで操作しているとき、「入力欄」と「下の説明文」が別々の情報として読み上げられてしまうことがあります。これでは、「入力欄にフォーカスしたときに、自動でヒントを読み上げてほしい」という願いが叶いませんよね。
ここで登場するのが、`aria-describedby`という魔法の属性です。これは、「この説明文は、あのIDの場所にあるやつだよ！」と紐付けてあげる機能なんです。
—
早速コードを書いてみましょう
理屈だけだと難しく感じるかもしれませんが、コードで見ると「あ、これだけ？」と思うはずです。
ここで何が起きているの？
1. `input`タグに `aria-describedby=”password-hint”` を入れました。
2. 説明文の `
` タグに、同じ名前の `id=”password-hint”` を付けました。
これだけで、ブラウザ（読み上げソフト）は「あ、この入力欄にカーソルが当たったら、あの`password-hint`の中身も一緒に読み上げればいいんだな！」と理解してくれるんです。まるで、「この項目には、こういう注意点があるよ」と耳元でそっと教えてくれるガイドさんを雇うようなものですね。
—
つまずきやすいポイントをフォロー！
「`label`タグで囲めばいいんじゃないの？」という疑問を持つ方もいるかもしれません。鋭い！
確かに`label`は入力項目の「名前」を教えるためのものですが、`aria-describedby`は「補足説明」を教えるためのもの。役割が違うので、両方を正しく設定するのがプロの技です。
- `label`: 「これは何を入力する欄ですか？」に対する答え
- `aria-describedby`: 「入力する時の注意点はありますか？」に対する答え
もし途中で動かないことがあっても大丈夫。「IDの名前は合っているかな？」「属性のスペルは間違っていないかな？」と一つずつ確認すれば、必ず動きます。焦らなくて大丈夫ですよ。
—
最後に：Webは誰かの「手」になる
アクセシビリティというと、「難しそう」「面倒くさそう」と感じるかもしれません。でも、今日やったことは、「困っている人に、ちょっとした道しるべを置く」という、とても温かい作業です。
`dl`タグで情報を整理し、`aria-describedby`で優しさを添える。これだけで、あなたの作るWebサイトは、もっとたくさんの人に開かれた場所になります。
ぜひ、次の制作で試してみてくださいね。きっと、あなたのコードが誰かの助けになりますよ！
コメント