【入門編】セクション要素とARIAランドマークロールの対応 – HTML実践ガイド

でも、ある時気づいたんです。「これだと、スクリーンリーダー（視覚障がいのある方が使う読み上げソフト）を使っている人には、どこがメインの文章で、どこが広告なのか全然伝わらないんだ」と。

今回は、そんな悩みを解決する「セクション要素」と、隠れた名脇役である「ARIAランドマーク」について、身近な例え話を交えてお話ししますね。難しく考えすぎなくて大丈夫ですよ。一緒に紐解いていきましょう！

—

そもそも「ランドマーク」って何？

Webサイトにおける「ランドマーク」とは、ページ内の特定の場所を指し示す「目印」のことです。

例えば、初めて行く大きなショッピングモールを想像してみてください。
「入り口（header）」「案内板（nav）」「ショップの並ぶメインエリア（main）」「駐車場の出口（footer）」といった看板があるから、私たちは迷わず歩けますよね。

Webブラウザやスクリーンリーダーも全く同じです。これらの要素を使うことで、ユーザーは「あ、ここがメインのコンテンツだな」「ここがメニューだな」と、瞬時にページの構造を理解できるんです。

—

HTMLが自動でやってくれる「魔法」

実は、HTML5から登場した主要なタグには、最初から「役割（ロール）」が割り振られています。これのおかげで、ただタグを書くだけで、ブラウザが勝手に「ここはヘッダーですよ」と認識してくれるんです。

| HTML要素 | 自動で割り当てられるランドマーク（role） |
| :— | :— |
| `