なぜ「divにroleを足す」より「pを使う」べきなのか？―ARIAロールとセマンティクスの境界線

現場でコードレビューをしていると、時折見かける光景がある。
「ここは見出しっぽく見せたいから`div`に`role=”heading”`を振っておこう」という実装だ。

一見すると、アクセシビリティ（A11y）を意識した丁寧な仕事のように思えるかもしれない。だが、断言しよう。それは「現代のフロントエンド開発における、最も避けるべき遠回り」だ。

今日は、中級エンジニアの皆さんが陥りがちな「ARIAロールの過剰摂取」と、なぜセマンティックなHTMLが最強の武器になるのか、その理由をブラウザの裏側まで掘り下げて解説する。

—

1. 「セマンティクス」がブラウザに与える特権

HTMLのタグは、単なるデザインの箱ではない。ブラウザのレンダリングエンジンは、タグそのものに「意味（セマンティクス）」を付与し、それをアクセシビリティツリーにマッピングする。

例えば、`

`を書いた瞬間、ブラウザは「これはページのメイン見出しである」というメタ情報をアクセシビリティツリーにプッシュする。これに対し、`div role=”heading” aria-level=”1″`と書いた場合、ブラウザは「この`div`は…えっと、見出しの役割を持つ何かだ」と、わざわざ解釈の手間をかけることになる。

これがなぜ問題か。「ネイティブ要素には、その要素固有のインタラクションやブラウザレベルの最適化が備わっているから」だ。

例えば、スクリーンリーダーは`

`から`

`の構造を読み取り、ユーザーに対して「見出しジャンプ」というナビゲーション機能を提供する。これを自前で実装しようとすれば、ARIAロールだけでなく、複雑なJavaScriptの制御が必要になる。ネイティブタグを使えば、ブラウザが無料で、かつ完璧にやってくれることを、わざわざコストを払って自分で実装する必要はないだろう？ 2. 「ARIAロールを上書きしてはいけない」という鉄則

WAI-ARIAの仕様書には、「ARIAの第一原則：ネイティブ要素で代用できるなら、ARIAを使うな」と明記されている。

`p`要素や`h1-h6`要素に`role`を付与する行為は、ブラウザにとって「この要素の本来のアイデンティティを隠して、別の役割を被せろ」という命令になる。これは、いわば「リンゴに『これはオレンジです』というラベルを貼るようなもの」だ。

もし、どうしてもデザインの都合でタグを変えられないという「現場の泥臭い事情」があるなら、それはHTMLの責務ではなく、CSSの問題だ。タグを正しく選び、CSSで見た目を整えるのが、シニアエンジニアとしての「筋」である。

—

3. 【実践】現場で使えるセマンティックなコード例

それでは、迷いやすいケースを例にコードを見てみよう。悪い例と、あるべき姿の比較だ。

製品一覧

製品一覧

このサービスは、あなたの効率を最大化します。

このサービスは、あなたの効率を最大化します。

特殊なケース：`pre`要素をどう扱うか

`pre`要素は「整形済みテキスト」だが、コードスニペットとして扱う場合は少し工夫が必要だ。もし、ただのテキスト表示ならそのままでいい。しかし、プログラムコードであることを明確にしたい場合は、`code`要素で包むのが正解だ。

  
    const greet = () => console.log("Hello, World!");
  

—

結論：HTMLは「書く」のではなく「選ぶ」

フロントエンド開発において、ARIAロールは「どうしてもネイティブ要素で表現できない場合の最後の手段」だ。

1. タグを選ぶ: `h1-h6`, `p`, `section`など、適切な意味を持つタグを選択する。
2. CSSで整える: デザインが合わないなら、クラス名で制御する。
3. ARIAは補完: どうしても意味が伝わらない（例えば動的なステータス変更など）時だけ、ARIAを最小限に使う。

「HTMLを書く」という作業は、単にDOMを構築することではない。ブラウザとスクリーンリーダーに、コンテンツの意味を正しく伝えるための「翻訳作業」なのだ。

この意識を持つだけで、あなたのコードの品質は一段上のレベルに達するはずだ。無駄なARIAを削ぎ落とし、本来あるべき美しいHTMLを書いていこう。それが、結果的にアクセシビリティも、メンテナンス性も、そして開発体験（DX）も向上させる唯一の近道なんだから。