HTMLの「リスト」をただの箇条書きだと思っていませんか？
Webサイトを作っていると、`
- `や`
- `は本当に毎日使う「相棒」のような存在ですよね。でも、実はその「リスト」という概念、ただ見た目を整えるためだけのものではないって、ご存知でしたか？
今日は、少しだけ視点を広げて「誰にとっても使いやすいリスト」を作るための、ちょっと深いお話をしましょう。難しく聞こえるかもしれませんが、大丈夫。身近な例え話から紐解いていけば、きっと「なるほど！」と思えるはずですよ。
—
1. スクリーンリーダーにとってのリストとは？
普段、私たちはWebサイトを見る時、無意識に「ここはメニューだな」「ここは箇条書きの項目だな」と目で見分けています。でも、視覚障がいのある方が使う「スクリーンリーダー（画面読み上げソフト）」は、Webサイトを「音」で理解しています。
想像してみてください。あなたは今、「目隠しをして、大量の書類を整理整頓しなければならない」という状況にいます。
もし、書類がバラバラに散らばっていたらどうでしょう？ どこから手をつけていいか分かりませんよね。でも、誰かが「ここからがリストの始まりですよ」「全部で5つありますよ」と教えてくれたら、安心して内容を聞くことができますよね。
HTMLの`
- `や`
- 卵 1パック
- 牛乳 1本
- 食パン 1斤
- ホーム
- プロフィール
- 設定
- HTML
- Webページの構造を作るためのマークアップ言語です。
- CSS
- Webページを彩り、レイアウトを整えるための言語です。
- `、`
- `といったタグは、スクリーンリーダーに対して「今から大事なグループの読み上げを始めますよ！」という合図を送る「見出し」のような役割を果たしているんです。
—
2. 実践！構造を正しく伝えるために
例えば、お買い物リストをHTMLで書くとき。ただ適当に`
`を並べるのではなく、ちゃんとリストタグを使ってあげることが、アクセシビリティ（使いやすさ）の第一歩です。これだけで、スクリーンリーダーは「リスト、3項目」といった情報をユーザーに伝えてくれます。これだけで、ユーザーは「あ、全部で3つ買えばいいんだな」と心構えができるんです。これこそが、HTMLが持つ「意味」の力ですね。
—
3. 「role属性」でリストを拡張する
さて、ここからが少しだけプロの領域。「リストなんだけど、ちょっと特殊な使い方をしたい」という時がありますよね。例えば、複雑なタブメニューや、独自のUIコンポーネントを作るときです。
そんな時、`role`属性を使って「これはリストとして振る舞ってくださいね」と、ブラウザに魔法をかけることができます。
具体例：タブメニューをリストにする
タブの切り替えボタンをリストとしてマークアップする場合、以下のように書くのがスマートです。
「あれ、普通に`
- `を使えばいいんじゃないの？」と思いましたか？ その通りです！でも、CSSでリストの見た目（点々やインデント）を消してしまうと、ブラウザによっては「これはもうリストじゃないや」と判断して、読み上げ機能をオフにしてしまうことがあるんです。
そんな時、`role=”list”`を添えてあげることで、「見た目はシンプルだけど、機能としては立派なリストですよ！」と改めて教えてあげることができるわけです。
—
4. 記述リスト（dl, dt, dd）も忘れないで！
最後にもう一つ。`
- `（箇条書き）や`
- `（順番付きリスト）の影に隠れがちですが、`dl`（定義リスト）というものがあります。
これは「言葉と説明」のペアを作るのに最適です。まるで「広辞苑」のようなイメージですね。
これも、スクリーンリーダーを使っている人にとっては、「用語」と「説明」がセットになっていることが明確に伝わるため、非常に親切な構造なんです。
—
最後に：小さな心遣いが、誰かの大きな助けになる
「HTMLタグを正しく選ぶ」ということは、単なるプログラミングのルールではありません。それは、「この情報を誰にでも届けたい」という、あなた自身の優しさの表現です。
最初は難しく感じるかもしれませんが、まずは「このグループはリストかな？ それとも用語の説明かな？」と、一呼吸置いて考えてみるだけで十分です。
完璧を目指して最初からすべてをこなそうとしなくて大丈夫。「今日は`
- `を使ってみようかな」という小さな一歩から始めてみてくださいね。その積み重ねが、いつか世界中の誰かにとって、最高に心地よいWeb体験を作り出すはずですよ！
それでは、また次回の記事でお会いしましょう！
コメント