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

「リストは本当にリストであるべきか？」― `role=”presentation”` でセマンティクスを制御する現場の知見

フロントエンド開発の現場で、「マークアップの正しさ」と「デザイン上の制約」が衝突することは日常茶飯事です。特に、CSSグリッドやFlexboxが標準となった今、CSSによるレイアウト制御は極めて容易になりました。

しかし、ここで多くのエンジニアが陥るのが、「レイアウトのために `

` や `
• ` を多用したがために、アクセシビリティツリーを汚染してしまう」という罠です。今回は、リストの構造を維持しつつ、スクリーンリーダーには「ただのグループ」として認識させるための魔法の杖、`role=”presentation”` について深く掘り下げていきます。

  —

  なぜ `role=”presentation”` が必要なのか？

  まず、ブラウザの裏側を覗いてみましょう。`

  ` や `
  ` といったタグは、ブラウザによって「リスト（list）」というアクセシビリティ上の役割（ロール）が付与されます。スクリーンリーダーを使用しているユーザーがその要素に到達すると、読み上げソフトは「リスト、〇項目」といった情報をアナウンスします。

  これは、メニューや目次のような「意味のあるリスト」であれば非常に有益です。しかし、単に横並びにしたいだけのグリッドレイアウトや、装飾目的の構造にこのアナウンスが入るとどうなるでしょうか？

  ユーザーは「今、重要なリストを読み上げているのか？」と混乱し、無駄な情報を聞かされることになります。これはUXとしては明らかなノイズです。そこで登場するのが `role=”presentation”` です。

  仕様の本質：セマンティクスの「無効化」

  W3Cの仕様において、`role=”presentation”`（またはそのエイリアスである `role=”none”`）は、「その要素が持つセマンティクス（意味）を削除し、純粋なコンテナとして扱う」ことをブラウザに伝えます。

  これを指定すると、アクセシビリティツリーからその要素自体と、その直接の子要素（例えば `li`）が「リストの一部である」というメタデータが剥ぎ取られます。ブラウザは、そのリストを「リスト構造ではない単なる要素の集合」として解釈するようになるわけです。

  —

  実務でそのまま使える！クリーンな実装例

  例えば、以下のような「カード型レイアウト」を組む場面を想像してください。本来は単なるグリッドですが、マークアップの都合で `ul` を使いたいケースです。

  • タイトル1

    説明文が入ります。

  • タイトル2

    説明文が入ります。

  注意点：ここが「現場の泥臭い罠」

  `role=”presentation”` を使う上で、一つだけ覚えておくべき重要なルールがあります。それは、「フォーカス可能な要素には使ってはいけない」ということです。

  もし `li` の中に `` タグや `` が入っている場合、`role=”presentation”` を付与すると、ブラウザによってはアクセシビリティの挙動が不安定になることがあります。インタラクティブな要素を持つ場合は、無理に `presentation` で消そうとせず、CSSでリストのデフォルトスタイルを完全に打ち消す（`list-style: none` など）アプローチを優先してください。

  —

  まとめ：アクセシビリティは「引き算」の勇気

  シニアエンジニアとして皆さんに伝えたいのは、「マークアップの正しさは、常にコンテキスト（文脈）に依存する」ということです。

  • 意味のある構造なら、堂々と `
    ` を使う。
    • 単なるレイアウトの都合なら、`role=”presentation”` でノイズを消す。
    • それでも不安なら、CSSだけで完結させる。

    技術はただの道具です。公式の仕様を丸暗記するのではなく、「ユーザーにどう届くか」を常に想像し、引き算の勇気を持つこと。それが、真に洗練されたフロントエンド・エンジニアへの近道です。

    さあ、皆さんのコードベースにある「余計なリスト」を、今日から少しずつ整理してみませんか？