Landmark Roles (Introduction to WAI-ARIA Part 2)

In the first section of this series, I'll be talking about roles. Today's article is about ARIA's landmark roles.

Landmark roles describe large areas of content to make it easier for assistive technologies (ATs) to skip over or navigate between areas of the page.

Browsers are pretty smart. Sometimes they know what you mean when you use semantic markup. I'll point out which of these roles are implicitly assigned to which semantic HTML elements. When using these elements, it's typically considered redundant to also use the corresponding ARIA roles. However, it won't hurt to use them.

`role="application"`

The application role declares the section of the page as an application...seems obvious enough. Typically, pages are declared as a web document by default. This role disables typical navigation controls for ATs because the application may need some of those navigational controls for different functions. For example, if the application is a game, the application area may need the up and down arrow keys to move an in-game object. For this reason, its use is strongly discouraged.

`role="banner"`

The banner role denotes site-wide information. This is typically where the company name and logo would go. It may also contain a search bar for the site. The <header> element has an implicit role of banner. The <header> tag or less semantic tags with the role="banner" attribute (such as <div role="banner">, which is not recommended) should be a direct child of the <body> element.

`role="complementary"`

The complementary role denotes secondary information. This information should complement the main focus of the page, but be able to be understood on its own. The <aside> element has an implicit role of complementary. (Screen readers mostly support aside without explicit roles.) If this blog post were its own page, the suggested reading links at the bottom would be a good candidate for the <aside> element or other element with the complementary role.

`role="contentinfo"`

The contentinfo role primarily applies to the footer of the website. It contains information about the document such as privacy and copyright information. It originally was intended to denote page specific information but seems to have shifted to covering all information in the footer of the page. The <footer> element has an implicit role of contentinfo. It is important to note that some screenreader/browser combinations do not expose footers as a landmark. I recommend checking out Scott O'Hara's article, "HTML5 Landmarks Exposed."

`role="form"`

The <form> element has an implicit role of form when also using the aria-label or aria-labelledby attributes to label the form, as shown in the code sample below. It is important to note that some screenreader/browser combinations do not expose forms as a landmark even with aria-label or aria-labelledby. To combat this, you can add a role="form" attribute to your <form> element. Again, I recommend Scott O'Hara's article, "HTML5 Landmarks Exposed."

<h1 id="heading">Name Collection Form</h1>
<form role="form" aria-labelledby="#heading">
  <label for="name">Name</label>
  <input type="text" id="name" />
  <button type="submit">Submit</button>
</form>

`role="main"`

The main content of the page. There should only be one main section per page, which can be denoted by the <main> element. The <main> element has an implicit role of main.

Denoting the main section of your page, paired with a skip link, can help sighted keyboard users navigate to the content of the page faster.

<a href="#main">Skip to Main Content</a>
<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>
<main id="main">
  ...Content!...
</main>

`role="navigation"`

The <nav> element has an implicit role of navigation. If using more than one navigation per page, it is important to differentiate them with an aria-label attribute on the <nav> element. This includes any type of secondary navigation, breadcrumbs, and pagination.

<nav aria-label="Site Navigation">
  <ul>
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>
<nav aria-label="Page Navigation">
  <ul>
    <li>First Section</li>
    <li>Second Section</li>
  </ul>
</nav>

`role="region"`

The region role is typically used when there's not another landmark role the content will fit in. The <section> element has an implicit role of region. Use this one sparingly because you wouldn't want your AT user wading through a sea of meaningless <section>s or regions!

`role="search"`

The search role denotes the section that contains the search for the website or for the web document. This can be contained within the <header> element. There's no specific search element, so this role needs to be on a <form> element that surrounds the search.

<h1 id="searchHeading">Search</h1>
<form role="search" aria-labelledby="#searchHeading">
  <label for="search">Search</label>
  <input type="search" id="search" />
  <button type="submit">Search</button>
</form>

Here's a CodePen example of some of these landmark roles in action.