ARIA: banner ロール

{{ariaref}} banner ロールは、ページの先頭に頻繁に配置される一般的で有益なコンテンツを表します。 これには、通常、ロゴ、会社名、検索アイコン、ページに関連する写真、またはスローガンが含まれます。

<div role="banner">
  <img src="companylogo.svg" alt="会社名">
  <h1>タイトル<h1>
  <h2>サブタイトル</h2>
</div>

HTML5 の <header> 要素は、<aside><article><main><nav>、または <section> の子孫でない限り、banner ランドマークと同じ意味を持ちます。

説明

banner ランドマークロールは、それが適用されたコンテナ要素をヘッダーに変換します。 これは、一般的に全ページ上部にあるサイト全体共通のサイトヘッダーのコンテンツ用に予約されているべきです。

バナー(banner)には、通常ロゴやコーポレートアイデンティティ、おそらくサイト固有の検索ツールが含まれており、一般的にマーケティングチームがサイトのヘッダーやトップバナーと呼ぶものです。 <header> 要素技術がそのバナーで使用されていない場合は、支援技術に対して banner ランドマーク(landmark)を定義するために、role="banner" の宣言を使用するべきです。

支援技術は、<body> 要素の子孫であり、<article><aside><main><nav> または <section> サブセクション内にネストされていない場合、バナーとしてページのメイン <header> 要素を識別できます。

各ページに banner ランドマークを持っていてもかまいませんが、各ページは banner ロールを持つ1つの <header> に限定するべきです。 ネストされた document ロールおよび/または application ロールを含むページの場合、ネストされたそれぞれの document ロールや application ロールは、1つの banner ランドマークを持っていてもかまいません。 ページに複数の banner ランドマークが含まれている場合は、それぞれに固有のラベルを付けるべきです。

関連する ARIA のロール、ステート、プロパティ

無し

キーボードインタラクション

無し

必要な JavaScript 機能

無し

ここでは、ナビゲーションへ飛ぶリンク、ロゴ、タイトル、サブタイトルを含む簡単なバナーがあります。 これがサイトのメインヘッダーであるため、banner ランドマークロールをコンテナ要素に追加しました。

<div role="banner">
  <a href="#nav" id="skipToMenu" class="skiptocontent">キーボードナビゲーションへ飛ぶ</a>
  <img src="images/w3c.png" alt="W3C ロゴ">
  <h1>ARIA ランドマーク</h1>
  <p>容易なナビゲーションのためのページのサブセクションの特定</p>
</div>

また、上記の HTML の <header> 要素で記述することもできます。

<header>
  <a href="#nav" id="skipToMenu" class="skiptocontent">キーボードナビゲーションへ飛ぶ</a>
  <img src="images/w3c.png" alt="W3C ロゴ">
  <h1>ARIA ランドマーク</h1>
  <p>容易なナビゲーションのためのページのサブセクションの特定</p>
</header>

ベストプラクティス

<header> 要素を使用して、ページの任意のサブセクションの子孫でないことを保証するのが最善ですが、場合によっては基になる HTML にアクセスできません。 この場合、JavaScript を使用してページのメインヘッダーに banner ロールを追加できます。 この方法でページのバナーを特定すると、サイトのアクセシビリティが向上します。

仕様

仕様 状態
Accessible Rich Internet Applications (WAI-ARIA) 1.1
ARIA: banner role の定義
勧告
WAI-ARIA Authoring Practices
Banner landmark role の定義
草案

スクリーンリーダーのサポート

TBD

関連情報