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 HTML header element defines a banner landmark when its context is the body element.

• The HTML header element is not considered a banner landmark when it is descendant of any of following elements:

  • article
  • aside
  • main
  • nav
  • section

HTML Example

<header>
<h1>website information<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>