WAI-ARIA: Role=Banner

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : Roles
WAI-ARIA:Role=Banner
WAI-ARIA:Role=Banner

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

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its rolesupported*supported*supported*partial*supportedsupportedsupportedunknownpartialsupportedsupported
MUST convey its namesupported*supported*supported*partialsupportedsupportedsupportedunknownpartialsupportedsupported
MUST convey the boundaries of the elementsupported*supported*supported*partialsupportedsupportedsupportedunknownnonesupportedsupported
SHOULD provide shortcuts to jump to this rolesupportedsupportedsupportedsupportedsupportedsupportedsupportedunknownsupportedsupportedsupported

* means that some support is hidden behind settings


Role=Banner 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

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

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.

Similar Posts

WAI-ARIA: Role=Menu

WAI-ARIA: Role=Menu

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A type of widget that offers a list of choices to the user.  Description A type of widget that offers a list of choices to the user.A menu is often a list of common actions or functions that the user can invoke. The menu role is appropriate when a list of menu items is presented in a…

WAI-ARIA: Role=MenuItem

WAI-ARIA: Role=MenuItem

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A presentation of menu that usually remains visible and is usually presented horizontally  Description An option in a set of choices contained by a menu or menubar. Authors MAY disable a menu item with the aria-disabled attribute. If the menu item has its aria-haspopup attribute set to true, it indicates that the menu item may…

WAI-ARIA: Role=Radiogroup

WAI-ARIA: Role=Radiogroup

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A group of radio buttons. Description A group of radio buttons. A radiogroup is a type of select list that can only have a single entry checked at any one time. Authors SHOULD enforce that only one radio button in a group can be checked at the same time. When one item in the group…

WAI-ARIA: Role=Option

WAI-ARIA: Role=Option

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
1 Comment

A selectable item in a select list. Description A selectable item in a select list. Authors MUST ensure elements with role option are contained in, or owned by, an element with the role listbox. Options not associated with a listbox might not be correctly mapped to an accessibility API. Elements with the role option have an…

WAI-ARIA: Role=Tab

WAI-ARIA: Role=Tab

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
1 Comment

Description A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. If a tabpanel or item in a tabpanel has focus, the associated tab is the currently active tab in the tablist, as defined in Managing Focus. tablist elements, which contain a set of associated tab…

WAI-ARIA: Role=Combobox

WAI-ARIA: Role=Combobox

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
2 Comments

A composite widget containing a single-line textbox and another element such as listbox or grid, that can dynamically pop up to help the user set the value of the textbox. Description A composite widget containing a single-line textbox and another element, such as a listbox or grid, that can dynamically pop up to help the user…

Leave a Reply

Your email address will not be published. Required fields are marked *