W3C Logo

ARIA Landmarks Example

Visually outline the landmarks and/or headings on the page using the following buttons.

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.1 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.

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>
  • 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:
    • article
    • aside
    • main
    • nav
    • section

HTML5 Example

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