Implementing Web Accessibility: A Guide to Aria Landmarks

The growth of underlying technologies demands that digital accessibility constantly evolve, often in lockstep with web design standards and practices. There is no finish line for accessibility, and stakeholders must continually reskill and educate themselves on current best practices. To reinforce this point, when the Web Content Accessibility Guidelines (WCAG) 2.1 were released a few years back, plans and working groups for WCAG 2.2 and even 3.0 were already in progress.

Enter WAI-ARIA, one of the accessibility innovations of the last two decades formed in response to rapidly changing web design standards. WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a W3C-codified set of semantic HTML attributes that can be applied to webpage elements to help improve accessibility for assistive technology users. It works by adding information to a browser’s accessibility API, thus helping screen reader users understand the accessibility of a webpage.

Implementing ARIA Landmarks on Your Website

Some of the most visible and useful features of ARIA are the eight landmark roles, which provide information about the content on a webpage based on different “landmarks.” Front-end developers need to only add a relevant role attribute to different containers in the HTML of a site so that screen readers can immediately read them at the top of the page and users can quickly navigate to the appropriate section. 

The eight ARIA landmark roles are:

1. role=”banner”
2. role=”navigation” (menu)
3. role=”main” (primary page content)
4. role=”complementary” (an iframe or sidebar)
5. role=”contentinfo” (webpage meta data such as authorship information)
6. role=”region” (a section of your site that is important enough that you might want to navigate there quickly)
7. role=”search”
8. role=”form”
9. role=”application”

ARIA landmarks provide a way to divide your webpage into logical sections. By providing landmarks, you enable users of assistive technology (AT) to more easily navigate to the sections of the page they want to interact with. 

If you have multiple of the same landmark (which should be avoided for “banner”), you should name them appropriately. For example, you could have two navigation areas on the site. The first could be a main menu at the top that allows you to navigate to all of your products. You might name that “main”. You could also have another menu that is all about the charities you support; you might name that “social responsibility”. The region landmark is often overused and really ought to be named. Use it carefully.

ARIA Best Practices and Troubleshooting Tips

ARIA landmarks are defined as role parameters to another HTML structure, often a div, but not always. When you are coding the front end of your website, you must consider when to utilize ARIA landmarks, especially if the HTML is complex. These two best practices can help:

1. Bake ARIA into Early HTML

Planning for development contingencies, such as ARIA landmarks, early in the process is almost always easier than retrofitting later. Considering which, if any, landmarks are needed within your HTML before you begin writing code ensures that they are properly accounted for while keeping development teams in lockstep on accessibility.

2. Only Utilize ARIA When Necessary

Trying to fit unnecessary ARIA landmarks into code is a common mistake made by developers. ARIA should always be used when needed, but you should focus on including the proper HTML elements and roles needed by screen readers first. 

Moving Forward with ARIA

WAI-ARIA offers an important tool for your accessibility toolbelt when building your website. The eight landmark roles can add value to your accessibility initiative by providing extra context about your site’s accessibility to users of assistive technology like screen readers.

If you want to learn more about ARIA and other web and app accessibility topics, check out our Roadmap to Digital Inclusion.