見出しの「嘘」を許すな：WAI-ARIA `role=”heading”` と `aria-level` の正しい付き合い方
現場でコードをレビューしていると、時折こんな光景に出くわします。「デザインは最高なんだけど、DOM構造がめちゃくちゃ」というケースです。特に「見た目は見出しだけど、HTMLタグは `div` や `span` で組まれている」という実装は、アクセシビリティの観点からは致命的なノイズになり得ます。
もちろん、原則は「正しいセマンティックなHTML（`h1`〜`h6`）を使うこと」に尽きます。しかし、レガシーなCMSの制約や、どうしようもないコンポーネントの仕様で、非標準的な要素に見出しの役割を与えなければならない瞬間が、皆さんのキャリアにも一度や二度は訪れるはずです。
今回は、そんな「逃げ場のない現場」で、ブラウザとスクリーンリーダーに正しく「ここが見出しだ」と伝えるための `role=”heading”` と `aria-level` の作法について、深掘りして解説します。
—
ブラウザの裏側で何が起きているのか？
まず、大前提として知っておいてほしいのは、ブラウザは「タグそのもの」を見ているわけではなく、その裏側にあるアクセシビリティツリーを構築しているという点です。
標準的な `
` タグを書けば、ブラウザは自動的に「この要素は Heading（見出し）であり、レベルは 1 である」という情報をアクセシビリティツリーに登録します。これがセマンティクスの力です。
一方で、`div` に `role=”heading”` を付与すると、ブラウザに対して「この `div` はただの箱ではなく、意味的な見出しとして振る舞え」という命令を下すことになります。ここで重要になるのが `aria-level` です。これを指定しない場合、多くのブラウザはデフォルトで `level=”2″` と解釈します。つまり、`
` のつもりで書いたのに、スクリーンリーダーには「見出し2」として読み上げられるという悲劇が起きるわけです。
実践：セマンティクスを補完する実装パターン
では、実務で使える堅牢な実装を見ていきましょう。ただ `role` を振るだけではなく、キーボード操作や視覚的な違和感がないようにケアするのがプロの仕事です。
これが見出しとして読み上げられるタイトルです / 視覚的には h3 と同等のスタイルを適用する / .c-heading-dummy { font-size: 1.5rem; font-weight: bold; margin: 1.5rem 0 0.5rem; } なぜ「安易に使うべきではない」のか？
ここからがシニアとしての忠告です。この手法は強力ですが、「最後の手段」であるべきです。理由は単純で、セマンティックなタグ（`h1-h6`）には、ブラウザのエンジンが最適化されたパフォーマンスと、検索エンジン（SEO）への強力なシグナルという大きな恩恵があるからです。
`role=”heading”` を使ったからといって、Googleのクローラーがその要素を「重要な見出し」として `h` タグと同等に評価してくれるとは限りません。SEOやレンダリング効率を考えると、可能な限り標準タグへリファクタリングする道を模索してください。
現場で役立つチェックリスト
もし、どうしてもこの実装が必要になった場合、以下の点を必ず確認してください。
- 階層構造は正しいか？：`aria-level` は 1 から 6 の間で設定してください。ページの論理構造を乱すレベル設定は、ユーザーを混乱させるだけです。
- CSSでの視覚的補完は完璧か？：`div` にした途端、ブラウザのデフォルトの `h` タグ用ユーザーエージェントスタイルが消えます。マージンやフォントサイズを忘れずに設定しましょう。
- 「見出し」として不自然な要素ではないか？：装飾目的のテキストに `role=”heading”` を付与するのは絶対NGです。それはスクリーンリーダーユーザーにとっての「ノイズ」でしかありません。
最後に：技術は「何ができるか」より「何のために使うか」
アクセシビリティの技術は、往々にして「マークアップの整合性を取るためのパッチ」として使われがちです。しかし、本来の目的は「ユーザーがコンテンツの構造を直感的に理解できるようにすること」にあります。
今回紹介した手法は、いわば「裏口」です。正門（標準タグ）から入れるならそれに越したことはありませんが、どうしても裏口を使わなければならない時、その鍵の回し方を正確に知っていることが、皆さんのエンジニアとしての価値を底上げします。
ぜひ、この知識を武器に、誰にとっても使いやすいWeb体験を形にしていってください。現場からは以上です！
コメント