BANNER Landmark

Definition A banner landmark identifies site-oriented content at the beginning of each page within a website. Site-oriented content typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.
ARIA Specification banner landmark
Coding Patterns
  • Each page may have one banner landmark.
  • The banner landmark should be a top-level landmark.
  • When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one banner landmark.
  • If a page includes more than one banner landmark, each should have a unique label (see Step 3 above).
Techniques
  • The HTML5 header element defines a banner landmark when its context is the body element.
  • The HTML5 header element is not considered a banner landmark when it is descendant of any of following elements:
    • address
    • article
    • aside
    • blockquote
    • details
    • fieldset
    • figure
    • main
    • nav
    • section
    • table
  • If the HTML5 header element technique is not being used, a role="banner" attribute should be used to define a banner landmark.
Headings
  • Each banner landmark may have an h1 element defining a label for the website.

Example of HTML5 header element technique

<body>

  <header>
    <h1>website information<h1>
    .... banner content....
  </header>

  <nav>
    <h2>title for navigation<h2>
    <ul>
      <li><a href="page1.html">Link 1</a></li>
      <li><a href="page2.html">Link 2</a></li>
      <li><a href="page3.html">Link 3</a></li>
      <li><a href="page4.html">Link 4</a></li>
      .....
    </ul>
  </nav>

  <main>
    <h1>title for main content<h1>
    .... main content....
  </main>

  <footer>
    <h2>Contact, Policies and Legal<h2>
    .... contentinfo content....
  </footer>
</body>

Example of [role="banner"] element technique

<body>

  <div role="banner">
    <h1>website information<h1>
    .... banner content....
  </div>

  <div role="navigation">
    <h2>title for navigation<h2>
    <ul>
      <li><a href="page1.html">Link 1</a></li>
      <li><a href="page2.html">Link 2</a></li>
      <li><a href="page3.html">Link 3</a></li>
      <li><a href="page4.html">Link 4</a></li>
      .....
    </ul>
  </div>

  <div role="main">
    <h1>title for main content<h1>
    .... main content....
  </div>

  <div role="contentinfo">
    <h2>Contact, Policies and Legal<h2>
    .... contentinfo content....
  </div>
</body>