ARIA: banner ロール
バナー (banner) ロールは、ページの先頭に頻繁に配置される一般的で有益なコンテンツを表します。 これには、通常、ロゴ、会社名、検索アイコン、ページに関連する写真、またはスローガンが含まれます。
<div role="banner">
<img src="companylogo.svg" alt="会社名" />
<h1>タイトル</h1>
<p>サブタイトル</p>
</div>
HTML5 の <header> 要素は、<aside>、<article>、<main>、<nav>、または <section> の子孫でない限り、バナー (banner) ランドマークと同じ意味を持ちます。
説明
バナーランドマークロール (banner landmark role) は、それが適用されたコンテナー要素をヘッダーに変換します。 これは、一般的に全てのページの上部にあるサイト全体で共通のサイトヘッダーのコンテンツ用に予約されているべきです。
バナーには、通常ロゴやコーポレートアイデンティティ、おそらくサイト固有の検索ツールが含まれており、一般的にマーケティングチームがサイトのヘッダーやトップバナーと呼ぶものです。 <header> 要素の手法がそのバナーで使用されていない場合は、支援技術に対してバナー (banner) ランドマークを定義するために、role="banner" の宣言を使用するべきです。
支援技術は、<body> 要素の子孫であり、<article>、<aside>、<main>、<nav> または <section> サブセクション内にネストされていない場合、バナーとしてページのメイン <header> 要素を識別できます。
各ページにバナー (banner) ランドマークを持っていてもかまいませんが、各ページはバナー (banner) ロールを持つ <header> を 1 つだけに限定するべきです。 ネストされた文書 (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) ロールを追加できます。 この方法でページのバナーを特定すると、サイトのアクセシビリティが向上します。
仕様書
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # banner |
| Unknown specification |
スクリーンリーダーのサポート
TBD
関連情報
- HTML
<header>要素 - WC3 Landmarks Example
- WAI-ARIA ロール
alertdialog ロールの使用ARIA: alert ロールARIA: application ロールARIA: article ロールARIA: banner ロールARIA: button ロールARIA: cell ロールARIA: checkbox ロールARIA: columnheader ロールARIA: combobox ロールARIA: command ロールARIA: comment ロールARIA: complementary ロールARIA: composite ロールARIA: contentinfo ロールARIA: definition ロールARIA: dialog ロールARIA: directory ロール非推奨;ARIA: document ロールARIA: feed ロールARIA: figure ロールARIA: form ロールARIA: generic ロールARIA: grid ロールARIA: gridcell ロールARIA: heading ロールARIA: img ロールARIA: input ロールARIA: list ロールARIA: listbox ロールARIA: listitem ロールARIA: main ロールARIA: mark ロールARIA: marquee ロールARIA: math ロールARIA: menu ロールARIA: menubar ロールARIA: menuitem ロールARIA: menuitemcheckbox ロールARIA: menuitemradio ロールARIA: meter ロールARIA: navigation ロールARIA: none ロールARIA: option ロールARIA: radio ロールARIA: radiogroup ロールARIA: range ロールARIA: region ロールARIA: row ロールARIA: rowgroup ロールARIA: rowheader ロールARIA: scrollbar ロールARIA: search ロールARIA: separator ロールARIA: spinbutton ロールARIA: switch ロールARIA: tab ロールARIA: table ロールARIA: term ロールARIA: textbox ロールARIA: tooltip ロールgroup ロールの使用link ロールの使用log ロールの使用presentation ロールの使用progressbar ロールの使用slider ロールの使用status ロールの使用toolbar ロールの使用