What ARIA landmark role should be used on a cookie banner?

When building a cookie banner, there are important considerations for choosing the appropriate ARIA landmark role based on the content’s purpose.

Every element on your webpage should be contained within a landmark region to ensure assistive technology doesn’t ignore the content. HTML provides sectioning elements including header, footer, main, aside, nav, and section. Each of these elements has a meaningful role that communicates context to the user. When using generic elements like div to mark up a section, we need to assign a meaningful role using ARIA landmark roles.

Here are three landmark roles to consider for a cookie banner:

1. Banner
   • WAI definition: “…identifies site-oriented content at the beginning of each page within a website.”
   • While this might seem like an obvious choice since a cookie banner looks like a banner, this landmark is intended for site-wide content such as organization logos, navigation menus, and site-specific search.
2. Complementary
   • WAI definition: “…designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.”
   • While this role is often used for alert bars at the top of webpages and could work for a cookie banner, the WAI documentation notes: “If the complementary content is not related to the main content, a more general role should be assigned.” Since a cookie notice isn’t directly related to the main content, this may not be the best choice.
3. Region
   • WAI definition: “…a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section.”
   • This landmark offers the most flexibility in HTML placement. Unlike role="banner" and role="complementary", which must be top-level landmarks (direct descendants of the body element), region can be placed anywhere.
   • Since multiple region landmarks can exist on a webpage, provide an accessible name using aria-labelledby or aria-label.

Here is an example of a cookie banner using the region landmark role:

<!-- A cookie banner with a region landmark -->
<div role="region" aria-labelledby="cookie_heading">
  <h2 id="cookie_heading">
    We use cookies on this site
  </h2>
  ... 
</div>

This code example is adapted from Stefany Newman’s article Dos and Don’ts of Accessible Cookie Banners, which provides additional guidance for building accessible cookie banners.