【入門編】role=presentationによるリストのセマンティクス解除 – HTML実践ガイド

こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。

HTMLを書き始めた頃、「レイアウトを整えるために`

`と`
• `を使いたいけれど、スクリーンリーダーに『リストです』って読み上げられるのがちょっと邪魔だな…」と感じたことはありませんか？

  実はそれ、とても鋭い視点です！今日は、そんな「見た目のためのリスト」を、どうやってスマートに扱うか。魔法の呪文`role=”presentation”`について、一緒に紐解いていきましょう。

  —

  リストの役割って何だろう？

  まず、普段私たちが使っている`

  `（順序なしリスト）や`
  • `（リストアイテム）の本来の役割を考えてみましょう。これらは、単なる「箇条書きの箱」ではありません。

    スクリーンリーダー（視覚障がいのある方がWebサイトを読むための読み上げソフト）を使っている方にとって、これらのタグは「ここからリストが始まります。全部で5つの項目がありますよ」という大事な案内図なんです。

    例えば、お買い物の「買うものリスト」なら、リストタグを使うことで「あ、いま買い物リストの途中なんだな」と文脈を理解できます。

    「見た目だけ整えたい」ときに起こる小さな違和感

    でも、Web制作をしていると、こんな場面に出くわしますよね。

    • 横並びのメニューを綺麗に作るために`
      `を使っている。
      • カード型のデザインを並べるために`
      • `を使っている。

      これらも本来はリスト構造ですが、デザイン上の都合で並べているだけで、「ここからリストが始まります！」とわざわざ宣言してほしくない場面もあるんです。

      もしスクリーンリーダーが「リスト項目です」「リスト項目です」と何度も読み上げたら、ユーザーさんは「えっ、何か重要なリストなのかな？」と混乱してしまいますよね。これでは、本来の「やさしいWeb」とは言えません。

      救世主 `role=”presentation”` の登場

      そこで登場するのが、今回お伝えしたい`role=”presentation”`です。

      これはHTMLに対して「あなたはリストとしての性格を捨てて、ただの『箱（要素）』として振る舞ってくださいね」とお願いする魔法の呪文です。

      実際に書いてみましょう

      たとえば、デザインのために使っている`

      `タグに、この魔法をかけてみます。
      • メニューA
      • メニューB
      • メニューC

      こう書くことで、ブラウザは「ああ、これはただのレイアウト用の箱なんだな」と判断し、スクリーンリーダーはリスト構造として読み上げなくなります。読者にとって、情報のノイズが一つ消えるというわけです。

      注意してほしい「大切なこと」

      ここで一つだけ、お守り代わりに覚えておいてほしいことがあります。

      `role=”presentation”` は、「何でも消していい便利な消しゴム」ではありません。本当にリストとして意味のある場所（例えば、記事の目次や、お買い物のリストなど）で使ってしまうと、大切な情報を隠してしまうことになります。

      「これは、ただ見た目を整えるためだけに、たまたまリストタグを借りているだけだ」

      そう確信できる場所にだけ、この魔法を使ってあげてくださいね。

      最後に：完璧を目指さなくて大丈夫！

      「roleなんて難しそう…」と身構える必要はありません。最初は「あれ？これって読み上げられたら変かな？」と想像するだけで、あなたはもう立派なアクセシビリティ・エンジニアの第一歩を踏み出しています。

      Webの構造は、人間と同じでちょっと不器用なところもあります。その不器用さを、HTMLというコードでそっとフォローしてあげる。そんな「優しさ」を込めたコーディングができれば、あなたの作るサイトはもっともっと素敵な場所になるはずです。

      もし分からないことがあっても、またいつでも聞きに来てくださいね。一緒に一歩ずつ、スキルアップしていきましょう！