皆さん、こんにちは！ 最強のフロントエンドスペシャリスト、そして皆さんのWeb制作を応援する主筆ライターの私です。
Webサイトを作るとき、「リスト」といえば `
- ` や `
- 辞書：単語と、その意味。
- Q&Aコーナー：質問と、その答え。
- 商品のスペック表：項目名（例：サイズ、重さ）と、その値（例：A4サイズ、500g）。
- 料理のレシピ：材料名と、その分量。
- `
- `（Description Term / 記述用語）
：これが「用語」や「項目名」にあたります。 - `
- `（Description Details / 記述詳細）
：そして、これが「用語」に対する「説明」や「値」にあたる部分です。 - 用語A
- 用語Aの説明
- 用語B
- 用語Bの説明
- ` の内容を読み上げる。
2. その直後に ` - ` の内容を読み上げる。
これが、まるで「店員さんが、商品の名前を言って、そのすぐ後に説明してくれる」みたいに、情報の関係性をはっきりと伝えてくれるんです。
簡単な例で見てみましょう。
- りんご
- 甘くてシャキシャキした赤い果物です。ビタミンCが豊富。
- みかん
- 手で皮が剥けて食べやすい、冬の代表的な柑橘類です。
このコードがあった場合、スクリーンリーダーはこんな風に読み上げてくれることが多いです。
- 「りんご」
- 「甘くてシャキシャキした赤い果物です。ビタミンCが豊富。」
- 「みかん」
- 「手で皮が剥けて食べやすい、冬の代表的な柑橘類です。」
どうでしょう？ `dt` と `dd` がセットになっていることで、「りんご」の説明がその直後に来る、という関係性がとても分かりやすく伝わりますよね。もしこれが単なる段落（`
`タグ）の羅列だったら、どれがどの説明なのか、ちょっと混乱してしまうかもしれません。
ここが肝心！ `dl` は、見た目だけでなく、情報の「意味」と「関係性」をHTMLで正しく伝えるための大切な役割を担っているんです。
複雑な記述リストに挑戦！`aria-describedby`でアクセシビリティをグンと高めよう
さて、ここまでは「1つの`dt`に1つの`dd`」というシンプルな形を見てきました。でも、世の中の情報はいつもそんなに単純ではありませんよね？
例えば、こんなケースはどうでしょう？
- 1つの用語（`dt`）に対して、複数の説明（`dd`）をしたい。
- 逆に、複数の用語（`dt`）に対して、共通の説明（`dd`）をしたい。
- あるいは、説明（`dd`）が長すぎて、一部を別の場所に書いておきたい。
HTML5からは、1つの `dt` に複数の `dd` を紐付けたり、逆に複数の `dt` に1つの `dd` を紐付けたりすることもできるようになりました。これだけでも表現の幅が広がります。
しかし、もっと複雑な関係性、特に「この要素の説明は、別の場所にあるこの情報も見てね！」と伝えたいときに、アクセシビリティの強力な味方となるのが `aria-describedby` という属性です。
`aria-describedby` って何？ 身近な例でイメージしてみよう
`aria-describedby` は、簡単に言うと「この要素の説明文は、IDが『〇〇』の要素だよ」と、HTMLの要素同士を紐付けるための魔法のひも、みたいなものです。
例えるなら、お店で店員さんが商品を紹介してくれるときを想像してみてください。
店員さん：「こちらのコーヒーは、香り高くて深みのある味わいが特徴です！」（これが `dt` と `dd` の基本的な関係）
さらに店員さん：「詳しい淹れ方やアレンジレシピは、こちらのパンフレットをご覧くださいね！」（←この「パンフレット」が、`aria-describedby` で参照する別の情報源のイメージ！）
このように、メインの説明とは別に、補足情報や詳細情報が別の場所にある場合、その「別の場所の情報」を `aria-describedby` で「この説明の一部ですよ」と教えてあげることができるんです。
`aria-describedby` を使ってみよう！
では、実際にコードで見てみましょう。今回は、商品の詳細情報があり、その中に「お取り扱い上の注意」という、少し長めの説明を別の `
` 要素に書いたケースを想定します。- 商品名
- 魔法のフライパン（26cm）
- 素材
- 特殊合金、焦げ付き防止加工
- お手入れ方法
- ご使用後は柔らかいスポンジで洗い、よく乾燥させてください。
お取り扱い上の注意
空焚きは絶対に避けてください。IH調理器ではご使用いただけません。火傷にご注意ください。
上記の例では、`
- お手入れ方法
` に `aria-describedby=”care-info”` という属性を追加しています。
これは、「`#care-dt`（お手入れ方法）の説明は、通常の `
- ` に加えて、IDが `care-info` の要素（つまり、`div`に入った『お取り扱い上の注意』）も含まれるよ！」とスクリーンリーダーに教えていることになります。
スクリーンリーダーは、この `aria-describedby` を見つけると、通常の `dd` の内容に加えて、参照先の `div` の内容も読み上げてくれることがあります。これにより、ユーザーは「お手入れ方法」に関する情報を、見落とすことなく、一連の流れで把握できるようになるわけですね！
`div` に `sr-only` というクラスが付いているのは、見た目では非表示にするけれど、スクリーンリーダーには読み上げてもらうためのテクニックです。（CSSで `position: absolute; left: -9999px;` などとして画面外に追いやるなど、様々な方法があります。）
ここが「なるほど！」ポイント: `aria-describedby` は、直接的な親子関係にない要素同士でも、意味的な関連性を結びつけることができる、アクセシビリティのための強力なツールなんです。これを使うことで、よりリッチで分かりやすい情報構造を、スクリーンリーダーユーザーにも提供できるようになります。
実際に書いてみよう！アクセシブルな`dl`のコード例
さあ、ここまで学んだことを活かして、いくつかコードを書いてみましょう！
例1：よくある質問（Q&A）
よくある質問
- Q. 注文してからどれくらいで届きますか？
- A. 通常、ご注文から3営業日以内に発送いたします。地域によっては数日かかる場合がございます。
- Q. 支払い方法は何がありますか？
- A. クレジットカード、銀行振込、コンビニ決済に対応しております。
- Q. 返品・交換は可能ですか？
- A. 未使用品に限り、商品到着後7日以内であれば返品・交換を承っております。詳細は「返品ポリシー」をご覧ください。
コメント:
- `dl`で質問（`dt`）と回答（`dd`）のペアをまとめています。
- スクリーンリーダーは「Q. 注文してから〜」「A. 通常、ご注文から〜」と、質問と回答がセットであることを明確に読み上げます。
- 見た目だけでなく、意味的な構造がしっかり伝わる、アクセシブルなQ&Aセクションになります。
例2：商品の詳細情報（複数の`dd`を持つ`dt`）
商品情報：高機能バックパック
- サイズ
- 高さ：45cm
- 幅：30cm
- 奥行き：15cm
- 容量
- 25リットル
- 特徴
- 軽量で耐久性に優れたリップストップナイロン製。
- ノートPC専用スリーブ、サイドポケット、チェストストラップ付き。
- 通勤・通学から日帰りハイキングまで幅広く活躍します。
コメント:
- `サイズ`や`特徴`といった一つの`dt`に対して、複数の`dd`を記述しています。
- HTML5以降の仕様で、このように複数の`dd`を紐付けることが可能になりました。
- スクリーンリーダーは、`dt`の後に続く複数の`dd`を続けて読み上げてくれます。
- これにより、関連する複数の情報を一つの項目としてまとめて伝えることができます。
例3：`aria-describedby` を使った補足情報
イベント詳細
- イベント名
- Webアクセシビリティ向上ワークショップ
- 日時
- 2024年12月24日（火）10:00〜17:00
- 会場
- 東京国際フォーラム ホールB5
会場は東京駅直結です。地下通路をご利用いただくと雨に濡れずにご来場いただけます。
コメント:
- `会場`の`dt`要素に`id=”venue-term”`と`aria-describedby=”venue-note”`を設定しています。
- これにより、会場の名称（`dd`）だけでなく、`id=”venue-note”`を持つ`
`要素の内容も、`会場`の説明の一部としてスクリーンリーダーに伝えられます。
- `sr-only`クラスは、見た目では隠すが、スクリーンリーダーには読み上げさせるためのCSSクラスです。
- このように、主要な情報と補足情報を別の場所に置きながらも、意味的な関連性を保証できるのが`aria-describedby`の強みです。
`dl`を使う上での「ちょっとしたコツ」と「注意点」
最後に、`dl`を効果的に使うためのコツと、気をつけてほしいポイントをいくつかお伝えしますね。
1. 「ペア」を意識する: `dl`は「用語とその説明」のペアを作るためのものです。`dt`だけ、`dd`だけ、といった単独での使用は避け、必ずセットで使いましょう。
2. 見た目ではなく「意味」で使う: 「見た目がインデントされてるから使おう」といった理由ではなく、「これは用語と説明のセットだ！」という、情報の意味的な構造が当てはまる場合に使うのが正しい使い方です。見た目の調整はCSSの役割ですよ。
3. 複雑になりすぎない工夫も: `aria-describedby`は強力ですが、あまりにも多くの要素を紐付けすぎると、かえって情報が複雑になり、ユーザーが混乱してしまう可能性もあります。シンプルに伝えられるなら、それが一番です。
4. テストしてみよう！: 実際にスクリーンリーダー（WindowsならNVDA、macOSならVoiceOverなど）を使って、ご自身のサイトがどのように読み上げられるか試してみるのが一番の学習方法です。「こう書けば、こう伝わるんだ！」という発見がきっとありますよ。おわりに：`dl`はあなたの強い味方！
いかがでしたでしょうか？
今回は、地味だけど実はとってもパワフルなHTML要素 `
- ` について、特に「アクセシビリティ」という視点から深掘りしてみました。スクリーンリーダーが `dl` をどう読み上げてくれるのか、そして `aria-describedby` のような魔法の属性を使って、もっとリッチで分かりやすい情報を提供できること、ご理解いただけたでしょうか。
Webサイトは、どんな人にとっても使いやすく、情報にアクセスしやすい場所であるべきですよね。そのためには、HTMLの持つ「意味」を最大限に引き出すことが本当に大切なんです。
`dl` は、そのための強力なツールの一つ。ぜひ皆さんのWeb制作に積極的に取り入れて、みんながニッコリ笑顔になるWebサイトを作っていってくださいね！
私も、皆さんがWebの面白さにどんどんハマっていく姿を見るのが一番の喜びです。また次の記事でお会いしましょう！
それでは、素敵なWeb制作ライフを！
- ` を思い浮かべますよね。買い物リストや手順を並べるのに便利で、きっと皆さん大活躍させていることでしょう！
でも、HTMLにはもう一つ、とーっても大切なリストがあるのをご存知ですか？ それが、今回ご紹介する `
- `（記述リスト）です。
「え、`dl`？ なんか難しそう…」
そう思いましたか？ 大丈夫ですよ！ 今日は、この `dl` が実は私たちの身近な情報整理にぴったりで、しかも「アクセシビリティ」、つまり「どんな人でも使いやすいWebサイトにする」ために、めちゃくちゃ重要な役割を果たすんだ！というお話を、とびきり優しく、そして現場の知見をたっぷり交えて解説していきます。
特に、スクリーンリーダーと呼ばれる、Webサイトの情報を音声で読み上げてくれるソフトが、`dl`をどう解釈してくれるのか、そしてもっと複雑な情報を伝えるためのちょっとした魔法もご紹介しますね。
さあ、一緒に `dl` の世界へ飛び込んでみましょう！
まずは基本の「き」！`dl`、`dt`、`dd`ってどんな仲間たち？
「記述リスト」という言葉を聞くと、ちょっと堅苦しいイメージがあるかもしれませんね。でも、難しく考える必要はありません！
`dl` は、実は「用語」とその「説明」をセットで表現したいときに使う、とっても便利な箱なんです。
例えば、
ね？ 意外と身の回りによくある情報の形だと思いませんか？
`dl` は、これら「用語と説明のペア」をまとめて包み込む親要素。そして、その中には二つの大切な子要素がいます。
イメージとしては、こんな感じ！
ポイント: `dt` と `dd` は、必ず `dl` の中にセットで入れる、ということを覚えておいてくださいね。まるでペアの靴下みたいに、いつも一緒なんです！
スクリーンリーダーは`dl`をどう読み上げるの？「なるほど！」の瞬間
さて、ここからが本題です。私たちは目で見れば、「あ、これは辞書みたいに用語と説明が並んでるな」とすぐに理解できますよね。
でも、目の不自由な方はどうでしょうか？ スクリーンリーダーは、Webサイトの情報を音声で読み上げてくれますが、ただ文字を順番に読み上げるだけでは、その情報の構造や関係性が伝わりにくいことがあります。
そこで、`dl` の出番です！
スクリーンリーダーは、`dl` の中にある `dt` と `dd` を見つけると、「これは、ある用語とその説明のセットだな」と賢く判断してくれます。そして、多くの場合、以下のように情報を伝えてくれます。
1. まず `
コメント