Thebanner 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 thebanner landmark, unless it is a descendant of<aside>,<article>,<main>,<nav>, or<section>, at which point<header> exposes ageneric role, and not the equivalent of the site-wide banner.

Description

Abanner 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 theheader element technique is not being used for that banner, a declaration ofrole="banner" should be used to define a banner landmark to assistive technologies.

Assistive technologies can identify theheader element of a page as thebanner if it is a descendant of thebody element, and not nested within anarticle,aside,main,nav orsection subsection.

Each page may have abanner landmark, but each page should generally be limited to a single element with the role of banner. In the case of a page containing nesteddocument and/orapplication roles, each nesteddocument orapplication role may also have onebanner landmark. If a page includes more than onebanner 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 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 thebanner landmark role to the container element.

<div role="banner">  <a href="#main">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 HTMLheader element:

<header>  <a href="#main">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

Using the<header> element will automatically communicate that the element has a role ofbanner. If possible, prefer using the semantic<header> element instead of thebanner role.

While it is best to use theheader 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 ofbanner to the element of the page which should be exposed as abanner with JavaScript. Identifying the page's banner in this way will help improve the site's accessibility.

Specifications

See also

• HTMLheader element
• WC3 Landmarks Example