【入門編】リストのアクセシビリティとARIAロール – HTML実践ガイド

でも、ちょっと待ってください。その「見た目」の裏側で、スクリーンリーダー（視覚障がいのある方がWebサイトを閲覧するために使う読み上げソフト）が、どう感じているか考えたことはありますか？

今日は、ただの飾りではなく「意味のあるリスト」を作るための、ちょっと奥深いお話をしますね。一緒に紐解いていきましょう！

—

なぜ「リスト」として書く必要があるの？

想像してみてください。スーパーで買い物をするとき、メモ帳に「たまご、牛乳、パン」と箇条書きで書きますよね。このとき、私たちは無意識に「これは個別の項目が並んだリストだ」と脳で理解しています。

スクリーンリーダーを使っている方も同じです。ブラウザが「これはリストですよ」と教えてくれると、彼らは「全3項目のリストか。じゃあ最初の項目から順番に聞こう」という準備ができるんです。

もし、これがただのバラバラな文字の集まりだったら？
「たまご、牛乳、パン…」と、ただの文章として読み上げられてしまい、どこからどこまでが項目なのか、全部でいくつあるのか、全くわからなくなってしまいます。これって、すごく不親切ですよね。

基本の「三種の神器」

HTMLには、この「リストですよ！」と伝えるための専用タグが用意されています。

• `
  ` (Unordered List)：順不同リスト。順番を入れ替えても意味が変わらないもの（例：お買い物リスト）。
  • `
    ` (Ordered List)：順序付きリスト。手順やランキングなど、順番が大事なもの（例：レシピの手順）。
    1. `

       ` (Description List)：記述リスト。用語とその説明がペアになっているもの（例：辞書やQ&A）。

  これらを使うだけで、ブラウザは「よし、リストが来たぞ！」とスクリーンリーダーに合図を送ってくれるんです。魔法みたいですよね。

  —

  リスト以外の要素でリストを「模倣」する場合の注意点

  でも、デザインの都合上、どうしても`

  `を使わなきゃいけない時もありますよね。「どうしてもこのデザインじゃないとダメなんです！」という現場の切実な声、よくわかります。

  そんなとき、HTMLの力だけで伝えられない「リストの意味」を補足するために登場するのがARIAロール（WAI-ARIA）です。

  「私、実はリストなんです」と名乗る魔法

  もし、どうしても`

  `を使えない状況なら、以下のルールで「これはリストですよ」と教えてあげましょう。

  たまご

  牛乳

  パン

  このように `role=”list”` と `role=”listitem”` を添えるだけで、スクリーンリーダーは「おっ、これはリストだ」と判断してくれます。

  【ここで大事なポイント！】
  これ、実は「CSSで見た目だけ変える」よりも、HTMLを正しく書く方がずっと簡単で、しかも壊れにくいんです。ARIAロールはあくまで「最後の手段」。まずは `

  ` や `
  • ` で書けないか、一度立ち止まって考えてみるのが、一流のフロントエンドエンジニアへの第一歩ですよ。

    —

    現場でよくある「つまずきポイント」

    「リストの中にリストを入れたいんだけど、どうすればいい？」という質問もよく受けます。大丈夫、入れ子にしても全く問題ありません！

    • 朝ごはん
      • たまご
      • パン
    • 夜ごはん

    こうやって入れ子にすると、スクリーンリーダーは「リストの中に、もう一つレベルの深いリストがあるぞ」と、階層構造までしっかり伝えてくれます。便利ですよね。

    —

    最後に：完璧を目指さなくていいんです

    ここまで読んで、「うわ、ルールがいっぱいあって難しい…」と身構えてしまいましたか？

    安心してください。最初から全てを完璧にできる人なんていません。まずは「この情報はリストとして並べるべきかな？」と一瞬だけ考えてみる。 それだけで十分です。

    Webサイトは、誰にとっても「使いやすい」場所であるべきです。あなたが書いたHTMLが、誰かの「見えない壁」を壊すきっかけになる。そう考えると、コードを書くのが少し楽しくなりませんか？

    わからないことがあったら、いつでもまた聞きに来てくださいね。あなたのWeb制作ライフが、より温かく、より誰かに届くものになりますように！