banner role represents general and informative content frequently placed at the beginning of the page. This usually includes a logo, company name, search icon, photo related to the page, or slogan.
<div role="banner"> <img src="companylogo.svg" alt="my company name"> <h1>Title<h1> <h2>Subtitle</h2> </div>
banner landmark role converts the container element upon which it is applied into a header. It should be reserved for the site header content that is common across the site generally at the top of every page.
The banner is typically includes things a logo or corporate identity, 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 main
header element of a page as the
banner if is a descendant of the
body element, and not nested within an
Each page may have a
banner landmark, but each page should be limited to only one
header with the role of banner. In the case of a page containing nested
application roles, each nested
application role may also have one
banner landmark. If a page includes more than one
banner landmark, each should have a unique label.
Associated ARIA roles, states, and properties
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.
<div role="banner"> <a href="#nav" id="skipToMenu" class="skiptocontent">Skip To Keyboard Navigation</a> <img src="images/w3c.png" alt="W3C Logo"> <h1>ARIA Landmarks</h1> <p>Identifying page subsections for easy navigation</p> </div>
We could also have written the above with the HTML
<header> <a href="#nav" id="skipToMenu" class="skiptocontent">Skip To Keyboard Navigation</a> <img src="images/w3c.png" alt="W3C Logo"> <h1>ARIA Landmarks</h1> <p>Identifying page subsections for easy navigation</p> </header>
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
|Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'ARIA: banner role' in that specification.
|WAI-ARIA Authoring Practices 1.1
The definition of 'Banner landmark role' in that specification.
Screen reader support