ARIA: banner role
=================

The `banner` role is for defining a global site header, which usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.

By default, the HTML's `<header>` element has an identical meaning to the `banner` landmark, unless it is a descendant of `<aside>`, `<article>`, `<main>`, `<nav>`, or `<section>`, at which point `<header>` exposes a `generic` role, and not the equivalent of the site-wide banner.

Description
-----------

A `banner` landmark role overwrites the implicit ARIA role of the container element upon which it is applied. It should be reserved for globally repeating site-wide content that is generally located at the top of every page.

The banner typically includes things such as a logo or corporate identity, or possibly a site-specific search tool, and is generally what your marketing team would call the "header" or "top banner" of the site. If the `header` element technique is not being used for that banner, a declaration of `role="banner"` should be used to define a banner landmark to assistive technologies.

Assistive technologies can identify the `header` element of a page as the `banner` if it is a descendant of the `body` element, and not nested within an `article`, `aside`, `main`, `nav` or `section` subsection.

Each page may have a `banner` landmark, but each page should generally be limited to a single element with the role of banner. In the case of a page containing nested `document` and/or `application` roles, each nested `document` or `application` role may also have one `banner` landmark. If a page includes more than one `banner` landmark, each should have a unique accessible name.

### Associated ARIA roles, states, and properties

None

### Keyboard interactions

None

### Required JavaScript features

None

Examples
--------

Here's a fake simple banner with a skip to navigation link, a logo, a title and a subtitle. As this is the main header for the site, we've added the `banner` landmark role to the container element.


```html
<div role="banner">
  <a href="#main" id="skipToMain" class="skiptocontent">Skip To main content</a>
  <img src="images/w3c.png" alt="W3C Logo" />
  <h1>ARIA Landmarks</h1>
  <p>Identifying page subsections for easy navigation</p>
  <nav>…</nav>
</div>
```


We could also have written the above with the HTML `header` element:


```html
<header>
  <a href="#main" id="skipToMain" class="skiptocontent">Skip To main content</a>
  <img src="images/w3c.png" alt="W3C Logo" />
  <h1>ARIA Landmarks</h1>
  <p>Identifying page subsections for easy navigation</p>
  <nav>…</nav>
</header>
```

Best practices
--------------

While it is best to use the `header` element and ensure it is not a descendant of any subsection of the page, sometimes you don't have access to the underlying HTML. If this is the case, you can add the role of `banner` to the element of the page which should be exposed as a `banner` with JavaScript. Identifying the page's banner in this way will help improve the site's accessibility.

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # banner |
| Unknown specification  |

See also
--------

* HTML `header` element
* WC3 Landmarks Example