DEV Community

Brandon Zhang
Brandon Zhang

Posted on • Updated on

Web Accessibility: banner role

#web #a11y

The banner role is an ARIA landmark role that is used to identify the header of a webpage. This section of the page typically contains information such as the website's logo, navigation menu, and search input.

By using the the banner role, assistive technologies can quickly identify and navigate to this important section of the page, improving the accessibility and usability of the website for users with disabilities, as well as improve the semantics of the HTML and making it easier to style.

<body>
  <header>
    <a class="logo" href="/">
      <span class="visually-hidden">Mr. Pineapple's Pizzeria</span>
    </a>
  </header>
</body>
Enter fullscreen mode Exit fullscreen mode

When inspecting a webpage with content like above using the Chrome DevTools, the Accessibility Tree will display the banner role for the <header> element. This indicates that the <header> element has been marked with the banner ARIA landmark role, which is used to identify the header section of the webpage.

RootWebArea "Demo App" focusable: true
    banner: ""
        link: "Mr. Pineapple's Pizzeria" focusable: true
Enter fullscreen mode Exit fullscreen mode

According to the MDN documentation, the <header> element is assigned the banner role when it is not used as a child of the <main> element or another sectioning element.

sectioning element means if the <header> element is used as a child of an element such as <main>, <nav>, <aside>, <article>, or <section>, it will not be assigned the banner role. Instead, it will be assigned the HeaderAsNonLandmark role. This role is used to indicate that the <header> element is still a header, but it does not represent a landmark region of the page.

inside nav 

<nav>
  <header>
    <a class="logo" href="/">
      <span class="visually-hidden">Mr. Pineapple's Pizzeria</span>
    </a>
  </header>
</nav>
Enter fullscreen mode Exit fullscreen mode 
RootWebArea "Demo App" focusable: true
    navigation: ""
        HeaderAsNonLandmark: ""
            link: "Mr. Pineapple's Pizzeria" focusable: true
Enter fullscreen mode Exit fullscreen mode

inside aside 

<aside>
  <header>
    <a class="logo" href="/">
      <span class="visually-hidden">Mr. Pineapple's Pizzeria</span>
    </a>
  </header>
</aside>
Enter fullscreen mode Exit fullscreen mode 
RootWebArea "Demo App" focusable: true
    complimentary: ""
        HeaderAsNonLandmark: ""
            link: "Mr. Pineapple's Pizzeria" focusable: true
Enter fullscreen mode Exit fullscreen mode

inside article 

<article>
  <header>
    <a class="logo" href="/">
      <span class="visually-hidden">Mr. Pineapple's Pizzeria</span>
    </a>
  </header>
</article>
Enter fullscreen mode Exit fullscreen mode 
RootWebArea "Demo App" focusable: true
    article: ""
        HeaderAsNonLandmark: ""
            link: "Mr. Pineapple's Pizzeria" focusable: true
Enter fullscreen mode Exit fullscreen mode

inside section 

<section>
  <header>
    <a class="logo" href="/">
      <span class="visually-hidden">Mr. Pineapple's Pizzeria</span>
    </a>
  </header>
</section>
Enter fullscreen mode Exit fullscreen mode 
RootWebArea "Demo App" focusable: true
    Section: ""
        HeaderAsNonLandmark: ""
            link: "Mr. Pineapple's Pizzeria" focusable: true
Enter fullscreen mode Exit fullscreen mode

Many UI frameworks, such as React and Vue, render their contents inside a <div id="app"> tag as a direct child of the document body.

Since <div> is not a sectioning element, <header> here still gets a banner role.

<body>
  <div id="app">
    <header>
      <a class="logo" href="/">
        <span class="visually-hidden">Mr. Pineapple's Pizzeria</span>
      </a>
    </header>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode 
RootWebArea "Demo App" focusable: true
    generic: "" # our div element
        banner: ""
            link: "Mr. Pineapple's Pizzeria" focusable: true
Enter fullscreen mode Exit fullscreen mode

To ensure that the webpage is accessible and follows best practices, it is recommended to follow a structure like this?.

<body>
  <div id="app">
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode 
RootWebArea "Demo App" focusable: true
    generic: "" # our div element
        banner: ""
        main: ""
        contentinfo: ""
Enter fullscreen mode Exit fullscreen mode

What if header is inside a custom element?

Let's say we'll put <header> inside the shadowRoot of a custom element <my-app> and see what role we get.

<body>
  <app-container>
    #shadow-root (open)
      <header>
        <a class="logo" href="/">
          <span class="visually-hidden">Mr. Pineapple's Pizzeria</span>
        </a>
      </header>
  </app-container>
</body>
Enter fullscreen mode Exit fullscreen mode

Yay, we still get a accessible banner role.

RootWebArea "Demo App" focusable: true
    Ignored: "" # <app-container>
        banner: ""
            link: "Mr. Pineapple's Pizzeria" focusable: true
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

sh20raj profile image

Deploy Full Stack NextJS app on Cloudflare Pages 📑

Sh Raj -

anogneva profile image

Compilation of gripping C++ conference talks from 2023

Anastasiia Ogneva -

dipakahirav profile image

Day 2: Advanced Techniques in Prompt Engineering

Dipak Ahirav -

lor1138 profile image

Want to learn programming? Contribute to open source.

Laura OBrien -