WAI-ARIA 1.2Roles

ランドマークロール

ランドマークロールは、ページの大きなセクションを識別し、スクリーンリーダーのユーザーがページ構造を把握してすばやくナビゲーションできるようにします。多くのランドマークロールはネイティブHTML要素で暗黙的に付与されます。

ランドマークロール一覧

ロール	HTML要素	説明	備考
`banner`	`<header>`	サイト全体のヘッダー。サイト名、ロゴ、グローバルナビゲーションなどを含む。	ページに1つだけ使用（body直下の場合に暗黙的に付与）
`main`	`<main>`	ページの主要コンテンツ。ナビゲーションやサイドバーを除くメイン領域。	ページに1つだけ使用すべき
`navigation`	`<nav>`	ナビゲーションリンクのグループ。サイト内やページ内のナビゲーション。	複数使用可。aria-label で区別する
`complementary`	`<aside>`	メインコンテンツを補完する補足情報。サイドバーや関連リンクなど。	メインコンテンツから分離しても意味が通じる内容
`contentinfo`	`<footer>`	サイト全体のフッター。著作権情報、プライバシーポリシーへのリンクなど。	ページに1つだけ使用（body直下の場合に暗黙的に付与）
`form`	`<form>（aria-label 付き）`	フォームのランドマーク。検索以外のフォーム入力領域。	<form> に aria-label か aria-labelledby がある場合のみランドマークになる
`region`	`<section>（aria-label 付き）`	ユーザーが興味を持ちそうな、十分に重要なコンテンツ領域。	<section> に aria-label か aria-labelledby がある場合のみランドマークになる
`search`	`<search>`	検索機能を含む領域。サイト検索やページ内検索。	HTML の <search> 要素（新しい要素）で暗黙的に付与

インタラクティブデモ

ランドマークリージョンの可視化

<header> → role="banner"

サイト名

<nav> → role="navigation"

ホーム製品お問い合わせ

<main> → role="main"

メインコンテンツ領域

<aside> → role="complementary"

サイドバー

<footer> → role="contentinfo"

スクリーンリーダーはランドマークロールを使って、ユーザーがページの各セクションにすばやくジャンプできるようにします。ネイティブHTML要素（header, nav, main, aside, footer）は暗黙的にランドマークロールを持ちます。

コード例

推奨: ネイティブHTML要素を使用

<header>
  <nav aria-label="メインナビゲーション">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="#">概要</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>ページタイトル</h1>
  <p>メインコンテンツ...</p>
</main>

<aside aria-label="関連リンク">
  <h2>関連記事</h2>
  <ul>...</ul>
</aside>

<footer>
  <p>&copy; 2026 サイト名</p>
</footer>

非推奨: div + ARIA ロール

<!-- ネイティブ要素が存在するのにARIAを使っている -->
<div role="banner">
  <div role="navigation" aria-label="メインナビゲーション">
    ...
  </div>
</div>

<div role="main">
  ...
</div>

<div role="contentinfo">
  ...
</div>

ベストプラクティス

ネイティブHTML要素（header, nav, main, aside, footer）を優先する

同じロールが複数ある場合は aria-label で区別する（例: 2つの nav）

main ロールはページに1つだけ使用する

ランドマークの過剰使用を避ける — 重要なセクションのみに使用

form と section は aria-label がないとランドマークにならない