ARIA: banner ロール

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

html
<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) ランドマークロールをコンテナー要素に追加しています。

html
<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> 要素で記述することもできます。

html
<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

関連情報

  1. WAI-ARIA ロール
    1. alertdialog ロールの使用
    2. ARIA: alert ロール
    3. ARIA: application ロール
    4. ARIA: article ロール
    5. ARIA: banner ロール
    6. ARIA: button ロール
    7. ARIA: cell ロール
    8. ARIA: checkbox ロール
    9. ARIA: complementary ロール
    10. ARIA: contentinfo ロール
    11. ARIA: dialog ロール
    12. ARIA: document ロール
    13. ARIA: feed ロール
    14. ARIA: figure ロール
    15. ARIA: form ロール
    16. ARIA: generic ロール
    17. ARIA: grid ロール
    18. ARIA: gridcell ロール
    19. ARIA: heading ロール
    20. ARIA: img ロール
    21. ARIA: list ロール
    22. ARIA: listbox ロール
    23. ARIA: listitem ロール
    24. ARIA: main ロール
    25. ARIA: navigation ロール
    26. ARIA: none ロール
    27. ARIA: option ロール
    28. ARIA: radio ロール
    29. ARIA: region ロール
    30. ARIA: row ロール
    31. ARIA: rowgroup ロール
    32. ARIA: search ロール
    33. ARIA: spinbutton ロール
    34. ARIA: switch ロール
    35. ARIA: tab ロール
    36. ARIA: table ロール
    37. ARIA: term ロール
    38. ARIA: textbox ロール
    39. ARIA: tooltip ロール
    40. group ロールの使用
    41. link ロールの使用
    42. log ロールの使用
    43. presentation ロールの使用
    44. progressbar ロールの使用
    45. slider ロールの使用
    46. status ロールの使用
    47. toolbar ロールの使用