Webサイトの「目次」を整理しよう：aria-labelでリストに名前を付ける魔法
こんにちは！フロントエンドの世界へようこそ。
HTMLを書き始めたばかりの頃、`
- `や`
- リストの役割が独立しているとき（ナビゲーション、目次、サイドバーのリンク集など）
- ページ内に同じようなリストが複数あって、区別したいとき
- `を使ってリストを作るのって楽しいですよね。でも、ページの中にリストがいくつも並ぶと、ちょっと困ったことが起きるんです。
例えば、Webサイトの「メニュー」と「記事の目次」、そして「関連リンク集」。これらは全部リストタグで作りますが、目が見えない方がスクリーンリーダー（画面読み上げソフト）を使ったとき、「これは何のリストだ？」と迷子になってしまう可能性があるんです。
今日は、そんな時に役立つ「リストに名前を付ける魔法」、`aria-label`のお話をしましょう。
—
そもそも、なぜリストに「名前」が必要なの？
皆さんは、スーパーマーケットでお買い物をするときを想像してみてください。
陳列棚に「野菜コーナー」「お肉コーナー」「お菓子コーナー」という看板がなかったらどうでしょう？ 全部同じ棚に見えて、どこに何があるか探すのが大変ですよね。
スクリーンリーダーを使っている方にとっても同じです。
ページを開いたときに「リストが3つあります」とだけ言われても、それが「メニュー」なのか「重要なお知らせ」なのか分かりません。
そこで登場するのが `aria-label` です。これを使うと、リストという「棚」に「これはナビゲーションですよ」「これは目次ですよ」という小さな看板を立てることができるんです。
—
早速やってみよう！コードで見る実践例
HTMLはとてもシンプルです。リストの親玉である `
- ` や `
- ` タグの中に、`aria-label=”〇〇”` と書き込むだけ。
サンプルコード：ナビゲーションと記事リストの区別
どうですか？ これだけで、スクリーンリーダーは「メインメニューのリストです」「この記事の目次のリストです」と、しっかり読み上げてくれるようになります。
—
ここで少しだけ注意点：使いすぎにご用心！
「じゃあ、すべてのリストに名前を付けなきゃ！」と思うかもしれませんが、ちょっと待ってくださいね。
実は、「わざわざ名前を付けなくてもいいリスト」もあります。例えば、文章の途中で出てくるただの箇条書きなどは、無理に `aria-label` を付ける必要はありません。
どんな時に付けるのが正解？
逆に、ただのメモ書きのようなリストにまで全部名前を付けてしまうと、今度は読み上げがうるさくなってしまうこともあります。「迷子になりそうな場所だけ、優しく看板を置いてあげる」くらいの気持ちで使うのが、一番の近道ですよ。
—
「誰かに優しい」は「自分にも優しい」
最初は「aria-label？ なんか難しそう……」と感じるかもしれません。でも、これは誰かのためというだけではなく、実は「正しい構造のWebサイト」を作るための大切なステップなんです。
コードを書きながら「このリストは何のためにあるんだろう？」と立ち止まって考えること。その小さな積み重ねが、いつかあなたの書くコードを、世界中の誰もが使いやすい「温かいWebサイト」に変えていきます。
難しく考えすぎず、まずは身近なリストに名前を付けてみることから始めてみてくださいね。大丈夫、ゆっくり一つずつ進んでいきましょう！
もし書いていて迷うことがあれば、いつでもまた見に来てくださいね。あなたのWeb制作ライフを心から応援しています！
コメント