ARIA Landmark Roles: The Best Way To Make Your HTML Feature-Rich and Accessible

We’ve all been there. You’ve created an amazing HTML page, and feel very proud of yourself. But then you realize that it’s not accessible to everyone. Maybe you need to add some ARIA landmark roles to make it more compliant with the W3C standards.

Don’t worry! This article will explain everything you need to know about ARIA landmark roles and how they can make your HTML pages more accessible and feature-rich.

What are ARIA’s Landmark Roles?

ARIA stands for Accessible Rich Internet Applications. Landmark roles are one of the many ways that ARIA improves the accessibility of web pages.

ARIA landmark roles are used to identify sections of a page that perform specific functions. For example, there are roles for navigation, search, main content, and other stuff. Using these roles makes it easy for screen readers to quickly reach the part of the page that interests the user.

How Do You Add ARIA Landmark Roles to Your HTML Page?

Just add the role attribute to the relevant element, and specify the role that you want it to play. For example, if you wanted to add a banner landmark role to an <div> element, you would do this:

See? Easy peasy.

But why bother with ARIA roles in the first place? Since 54% of adults with disabilities use the internet, making sure that your web pages are accessible to as many people as possible is essential. Trust me. It’s worth taking the time to add these roles to your elements.

Landmark Roles

Here are the different ARIA landmark roles that you might use on your web pages:

Banner

It is used for elements that contain the site’s name, logo, and navigation. This is typically the header element at the top of the page. Because it includes such crucial information, the banner role should be used sparingly on a page – too many banners can be confusing for screen reader users.

If your page has multiple banner elements, each one should have a unique aria label to properly identify the banner and prevent confusion for users and screen readers.

Complementary

It is used for content that supplements the page’s main content but could still stand on its own. Examples include sidebars, callouts, and notes. This is a great way to provide extra information without overwhelming the user.

If the complementary content is related to the main content, a more general role should be used instead, like region.

Contentinfo

It is for information about the page, such as the author, copyright information, terms and conditions, and contact details. This information is typically found in the footer element at the bottom of the page.

The contentinfo role can help ensure that this vital information is accessible to all users and usually it has navigation elements just like the header navigation plus extras.

Form

Forms are an essential part of any web page. They allow you to gather user information and then process it accordingly. To make forms easier, you can use the ARIA landmark role of “form.” This will help to identify the form for users, making it easier for them to fill out.

Main

It is utilized for the main content of the page. This content should be unique to the page and not repeated on other site pages. For example, if you have a blog site with multiple articles, each article would have its own main content area. Screen reader users can use the main role to quickly find and navigate to the main content on a page.

Navigation

This role is to identify a page section that contains links to other pages or sections within the same page. It can be helpful for visitors looking for specific information on the page, and it can also help improve the page’s usability.

Region

It is a landmark role that can be used to define a page section with a specific purpose. This must have a label to be properly identified by screen reader users. It might be a header at the top of the page, the main content area, or a sidebar. The region role should be used when there is a clear division between different page parts.

Search

It is used to indicate a search form or field on the page. This is essential for people who need to find specific information on the page, such as through a search engine. When a search role is used, the screen reader will announce the presence of the search form or field and read any text entered into it. Use it instead of the form role when the form is used specifically for searching.

How Do ARIA Landmark Roles Improve Accessibility?

• They help screen readers and other assistive technologies navigate the page more easily.
• They provide additional semantic information about the page.

Let’s take a closer look at each of these points.

Screen readers are software programs that help blind and visually impaired users access web content. They convert the text on the screen into synthesized speech or braille output. Screen readers can also navigate web pages using various methods, such as headings, lists, links, and so on.

Adding ARIA landmark roles to your HTML elements can help screen readers navigate your page more easily. For example, if you add a navigation role to an <nav> element, the screen reader will know that this element contains navigational information. It will make it easier for the user to find the navigation section of the page and understand what it has.

In addition to helping screen readers navigate the page, ARIA landmark roles provide additional HTML semantic information about the page. Assistive technologies, such as text-to-speech software and search engines, use this semantic information to understand and navigate your website.

Wrapping Up

ARIA landmark roles are a great way to improve the accessibility of your web pages. But what about if I tell you that you don’t need to write all that code to achieve the same results? If you want to learn how to do that, I suggest you check out my article about How Using Semantic HTML Can Make Your Website More Accessible.

We hope you’ve found this article helpful and that you will start using ARIA landmark roles on your web pages.