ARIA Landmark Region Patterns
Based on the W3C ARIA Authoring Practices for Landmark Regions

Banner Landmark

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 1.2 Specification: banner landmark.

Design 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.
The header element is a banner landmark when it is not a descendant of any of the following HTML sectioning elements:
  • article
  • aside
  • main
  • nav
  • section

HTML Example

<header>
  <h1>page title identifying website<h1>
  .... banner content....
</header>

A role="banner" attribute is used to define a banner landmark.

ARIA Example

<div role="banner">
  <h1>page title identifying website<h1>
  .... banner content....
</div>