A region that contains mostly site-oriented content, rather than page-specific content.
A region that contains mostly site-oriented content, rather than page-specific content.
Description
A region that contains mostly site-oriented content, rather than page-specific content.
Site-oriented content typically includes things such as the logo or identity of the site sponsor, and a site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.
User agents SHOULD treat elements with the role of banner as navigational landmarks.
Within any document or application, the author SHOULD mark no more than one element with the banner role.
Note: Because document and application elements can be nested in the DOM, they may have multiple banner elements as DOM descendants, assuming each of those is associated with different document nodes, either by a DOM nesting (e.g., document within document) or by use of the aria-owns attribute.
Screen Reader Support For Role=Banner
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey its role | supported* | supported* | supported* | partial* | supported | supported | supported | unknown | partial | supported | supported |
| MUST convey its name | supported* | supported* | supported* | partial | supported | supported | supported | unknown | partial | supported | supported |
| MUST convey the boundaries of the element | supported* | supported* | supported* | partial | supported | supported | supported | unknown | none | supported | supported |
| SHOULD provide shortcuts to jump to this role | supported | supported | supported | supported | supported | supported | supported | unknown | supported | supported | supported |
* means that some support is hidden behind settings
Example
HTML Example
<div role=”banner”>
<h1>My Site</h1>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/about”>About</a></li>
<li><a href=”/contact”>Contact</a></li>
</ul>
</div>
HTML5 Example
<header role=”banner”>
Characteristics
Superclass Role
- landmark
Required Attributes
- none
Optional Attributes
- aria-labelledby
- aria-label
Requires Scripting
- No
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Semantic HTML
No HTML element equivalent.
Recommended to be used on one header element per page if the header element is used as described for role=”banner”.
Reference
- W3C (opens new window)
- A11Y Support