見出しの「役割」を教える魔法？ WAI-ARIAでアクセシビリティを底上げしよう

こんにちは！フロントエンドの世界へようこそ。
HTMLを書き始めると、必ず出会うのが`

`から`

`までの「見出しタグ」ですよね。 「見出しって、ただ文字を大きく太くするだけでしょ？」と思っているとしたら、ちょっと待ってください！実はこれ、Webの世界では「本の目次」のような超重要な役割を担っているんです。 今日は、そんな見出しのセマンティクス（意味付け）を、ちょっと特殊な状況でも正しく伝えるための「魔法の呪文」こと、WAI-ARIA（ワイ・アリア）についてお話しします。 — なぜ「見出しタグ」が必要なの？

例えば、あなたが大きな図書館に入ったとします。本棚にはたくさんの本がありますが、案内板や章立てがなかったらどうでしょう？ 欲しい情報がどこにあるか、全くわかりませんよね。

目の見えない方や、スクリーンリーダー（画面読み上げソフト）を使っている方にとって、Webサイトはまさに「目次のない本」のようなもの。`

`や`

目次

1. 見出しの「役割」を教える魔法？ WAI-ARIAでアクセシビリティを底上げしよう
1. ` と同じレベルの見出しなんだな！」と認識してくれます。 — つまずきやすいポイント：なぜ「タグ」を優先するべきなの？

`というタグがあることで、ブラウザは「ここからがメインの話題だよ！」「ここは小さな補足だよ！」と、ユーザーに構造を伝えてくれるんです。 でも、たまにこんな現場に出くわすことがあります。 「デザインの都合で、どうしても見出しタグを使えない……でも、構造上は見出しとして扱ってほしい！」 そんな「困った！」を解決するのが、今回紹介する`role=”heading”`と`aria-level`です。 — まるで「変装の名人」！role=”heading”の仕組み

HTMLには「本来の役割」が決まっています。例えば``は「ボタン」ですし、`

`は「見出し」です。

でも、`

`や``といった「中身が空っぽの箱」に、無理やり「あなたは今日から見出しですよ！」と役割を与えるのが `role=”heading”` です。

実装してみましょう

例えば、どうしても `

` タグで構成しなければならないデザインの場所があるとします。そんな時はこう書きます。

ここが見出しの役割を持つテキストです

ここで登場するのが `aria-level` です。
これは「何番目の見出し（h2なのか、h3なのか）」を数字で指定する属性です。`aria-level=”2″` と書けば、ブラウザや読み上げソフトは「おっ、これは `

` と同じレベルの見出しなんだな！」と認識してくれます。 — つまずきやすいポイント：なぜ「タグ」を優先するべきなの？

ここまで読んで、「じゃあ全部 `div` に `role=”heading”` を付ければいいじゃん！」と思った方、鋭いですね！

でも、ちょっと待ってください。「特別な理由がない限り、本来のHTMLタグを使う」のが、私たちフロントエンドの鉄則です。

• 理由1：ブラウザへの負担が少ない

`

` と書くだけでブラウザは「ああ、見出しね！」と一瞬で理解します。余計な属性をたくさん書くよりも、素直なタグを使う方がWebサイトはサクサク動きます。

• 理由2：ケアレスミスが減る

`aria-level` の数字を書き間違えて、「本当はh2なのにh5にしちゃった！」なんてミスも、最初から `

` タグを使っていれば起きませんよね。 「roleは、どうしてもHTMLタグが使えない時の最後の切り札」として覚えておいてください。 — まとめ：Webは「誰にでも優しく」

今回紹介したWAI-ARIAは、Webサイトを「もっと多くの人に届けるための優しさ」です。

最初は難しく感じるかもしれません。「ARIAって何？カタカナばっかり……」と投げ出したくなる日もあるでしょう。でも大丈夫。「画面の向こうには、色々な方法でサイトを楽しんでいる人がいる」ということを意識するだけで、あなたの書くコードはぐっと温かく、強くなります。

まずは、自分の書いたコードに「これは見出しかな？それともただの文字かな？」と問いかけてみることから始めてみてください。それだけで、あなたはもう立派なフロントエンド・エンジニアの第一歩を踏み出していますよ！

これからも一緒に、楽しくWeb作りを学んでいきましょうね。それでは、また！