ランドマーク領域
ARIA ランドマークロールは、ウェブページの構成と構造を識別する強力な手段を提供します。
このプラクティスの詳細は Landmark Regions - WAI-ARIA APG を参照してください。 以下は、このサイトの実装例に基づく補足解説です。
概要
ARIA ランドマークロールを使用すると、支援技術のユーザーがページの異なるセクションにすばやく移動し、識別できるようになります。このプラクティスでは、8つのランドマークロールを効果的に使用する方法を説明します。
8つのランドマークロール
| ロール | HTML5 要素 | 目的 |
|---|---|---|
banner | <header>（トップレベル） | サイト全体のヘッダー。通常、サイトロゴとナビゲーションを含む |
navigation | <nav> | 主要なナビゲーションリンク |
main | <main> | ページの主要コンテンツ |
complementary | <aside> | メインコンテンツに関連する補足コンテンツ |
contentinfo | <footer>（トップレベル） | サイト全体のフッター。著作権情報やプライバシーリンクなど |
search | <search> | 検索機能 |
form | <form>（アクセシブルな名前付き） | フォームランドマーク（フォームにアクセシブルな名前がある場合） |
region | <section>（アクセシブルな名前付き） | 識別が必要なコンテンツのための汎用ランドマーク |
実装のポイント
HTML5 セマンティック要素を使用する
ランドマークを作成する最も簡単な方法は、HTML5 セマンティック要素を使用することです。ブラウザは自動的に適切なランドマークロールを割り当てます：
<header><!-- banner --></header>
<nav><!-- navigation --></nav>
<main><!-- main --></main>
<aside><!-- complementary --></aside>
<footer><!-- contentinfo --></footer>同じタイプの複数のランドマークにラベルを付ける
同じタイプのランドマークが複数ある場合（例：複数の <nav> 要素）、aria-label または aria-labelledby を使用してそれらを区別します：
<nav aria-label="メイン">...</nav>
<nav aria-label="フッター">...</nav>ランドマークの不適切なネストを避ける
一部のランドマークはネストすべきではありません。例えば、main は別の main を含むべきではなく、banner は他のランドマーク（form または region を除く）の中にネストすべきではありません。
よくある間違い
main ランドマークの欠落
すべてのページには正確に1つの main ランドマークが必要です。これにより、キーボードユーザーは主要コンテンツにすばやくジャンプできます。
ラベルのない重複ランドマーク
ラベルのない複数の <nav> 要素があると、スクリーンリーダーユーザーがそれらを区別することが難しくなります。
region の過剰使用
region（またはアクセシブルな名前を持つ <section>）は、コンテンツがランドマークナビゲーションリストに含まれるほど重要な場合にのみ使用します。ランドマークが多すぎると、その有用性が低下します。
アーティクル内にネストされた header と footer
<header> または <footer> が <article>、<aside>、<main>、<nav>、または <section> の中にネストされている場合、それはランドマークにはなりません。トップレベルの <header> と <footer> 要素のみが banner と contentinfo ランドマークになります。
このサイトの実装例について
このサイトの Landmarks パターン では、8つのランドマークロールすべての実装例を提供しています。各フレームワーク（React、Vue、Svelte、Astro）での実装方法を確認できます。
また、各ランドマークの正しい使用方法と、スクリーンリーダーでの動作確認方法についても説明しています。