Skip to main content

Blog Mark Wilcock

https://markwilcock.com/2020/07/accessibility-rich-internet-applications-aria-landmarks/

Accessibility Rich Internet Applications (ARIA) Landmarks

Posted on:

Accessibility Rich Internet Applications (WAI-ARIA) landmarks are attributes that you can include in elements within your webpage to define regions or sections such as the main content or a navigation region. The following landmarks are provided by ARIA.

Landmark AttributeUsage
BannerContains the site-oriented content of each page, like the logo, usually located at the top of the page. There should only be one banner landmark per page.
Complementary A section of content that complements the main content but also retains its meaning when separated from the main content.
Contentinfo Contains content usually found in the footer of a page, like copyright and privacy statements. There should only be one contentinfo landmark per page.
Form Contains form input elements which can be edited and submitted by the user.
Main The main content of the page, only one should be applied per page.
Navigation A collection of navigation links to navigate the site or page.
Search A search tool.
Application Represents a unique software unit, and keyboard commands are handled by the application rather than the browser itself. This role should be used sparingly.

You should not place the 'role' attribute on elements that have native semantic meaning, such as <ul>, <nav>, <banner> etc. Realistically, it should only be assigned to <div> and <span> elements.

As these roles will be exposed within the Document Object Model (DOM) of the webpage, assistive technologies can use this additional information to provide additional functionality, such as enabling screen readers the ability to easily jump between sections, and be provided the additional context of that section.

As an example, this could be how you have implemented a navigational menu.

<div id="nav">
  <ul>
    <li>Home</li>
    <li>Services</li>
    <li>Contact Us</li>
  </ul>
</div>

Using a screen reader as an example assistive technology, when the user encounters these navigational links, they will have output a collection of links, and have to intuit from the context that these links are related or a main menu. Using ARIA landmarks we can provide semantic information about this <div> by adding the attribute role="navigation", therefore defines this <div> as a navigation region.

Note, it's always preferable to use native HTML elements if possible, such as the <nav> element in HTML, instead of ARIA landmark attributes if at all possible.

<div id="nav" role="navigation">
  <ul>
    <li>Home</li>
    <li>Services</li>
    <li>Contact Us</li>
  </ul>
</div>

Still using a screen reader, the user will now have the output of something along the lines of 'navigation landmark'.

The landmark role is intended to be used sparingly, landmarks should only be used to outline the overall segments of the page. If to many landmark roles are applied to a page, it can make the advantages gain by applying these roles obsolete or even cause a detrimental effect to users.

A pages landmarks can be exposed without having to manually review the pages DOM using such browser add-ins as 'Landmarks' by Matthew Tylee Atkinson or 'Accessibility Bookmarklets'.

Read more about the remainder of the Accessible Rich Internet Applications (ARIA) Standard

This article was last updated on September 12th 2020.

Sharing and comments

Share this page

Leave a comment

We only ask for your email address so we know you're a real person

By submitting a comment you understand it may be published publicly on this website. Please read our privacy notice to see how we handle your information.