Accessible Rich Internet Applications (ARIA) landmarks are a set of attributes that web developers can use to enhance the accessibility of your website. These landmarks provide a clear and logical structure for your site content and make your website more accessible. They specifically help users with disabilities navigate your site more easily. Moreover, from an online marketing perspective, they help you improve your website SEO.
Their origin can be traced back to the increasing need for web accessibility in the late 1990s. As the internet began to play a more significant role in people’s daily lives, it became apparent that not everyone could access and navigate the web with ease. Individuals with disabilities faced numerous challenges while trying to access content online.
In response to this growing concern, the World Wide Web Consortium (W3C) formed the Web Accessibility Initiative (WAI) in 1997. This group aimed to develop guidelines and standards that would ensure that the web was more inclusive for everyone, regardless of abilities.
WAI introduced the Web Content Accessibility Guidelines (WCAG) in 1999. These provided recommendations for making web content more accessible. But, it soon became clear that a more specialised solution would be needed to cater to the unique challenges faced by individuals using assistive technologies, such as screen readers.
And thus, ARIA (Accessible Rich Internet Applications) was born. In simple terms, they can be likened to signposts on a web page that guide users through the different sections and help them understand the structure of the content.
There are several types of ARIA landmarks, each serving a specific purpose. Even if you don’t use our website templates You can create an ARIA landmark by adding the role attribute with the specific value of the attribute to the respective element of your website. If this sounds confusing, we look at how this is done for the different landmarks below.
Types of ARIA Landmarks
Banner
The banner landmark represents the site header. This section usually contains the site logo, main navigation menu, and sometimes, a search bar.
To create a banner landmark, you have to add the role attribute with the value “banner” to your header element like this.
<header role="banner">
...
</header>Navigation
This landmark is used to indicate the primary navigation menu on your website. This makes it easier for users to find and navigate through your website sections. To create a navigation landmark, add the role attribute with the value “navigation” to your nav element.
<nav role="navigation">
...
</nav>Main
The main landmark represents the primary content area of your website, distinguishing it from other supplementary content. To create a main landmark, add the role attribute with the value “main” to your main element.
<main role="main">
...
</main>Complementary
This landmark is used for content that complements the main content. These include sidebars, related articles or advertisements. To create a complementary landmark, add the role attribute with the value “complementary” to your aside element as below:
<aside role="complementary">
...
</aside>Contentinfo
The contentinfo landmark typically represents the site footer. It contains information like copyright notices, legal information, and contact details. To create a contentinfo landmark, add the role attribute with the value “contentinfo” to your footer element.
<footer role="contentinfo">
...
</footer>Region
The region landmark is a versatile one and is used to denote significant sections of content on a page that are not covered by other landmarks. To create a region landmark, add the role attribute with the value “region” and a descriptive aria-label to your div element as below:
<div role="region" aria-label="Featured Articles">
...
</div>Search
The search landmark is used to indicate a search functionality on your website. This makes it easier for users to locate and use the search feature. To create a search landmark, add the role attribute with the value “search” to your form element. You can do this as below:
<form role="search">
...
</form>Designing with ARIA Landmarks in Mind
When implementing ARIA landmarks, whether you are making a website for charities, it makes sense to keep in mind the following best practices:
- Use appropriate landmark roles: Ensure that each section of your website is assigned the correct ARIA role. This will help users and assistive technologies understand the content structure
- Avoid nesting landmarks: Nested landmarks can be confusing for screen reader users. As such, you should try to keep them separate and clearly defined
- Limit their use: Too many of these attributes can be overwhelming for the user. Think of it in terms of a room – too much furniture and you have clutter. So focus on the most important sections of your site
- Provide clear labels: Use the ‘aria-label’ attribute to give landmarks descriptive labels. This will make it easier for users to understand their purpose
Now that we have understood what ARIA landmarks are and how to use them, here are the common mistakes people make with these attributes.
Common Pitfalls to Avoid
- Incomplete Implementation: Ensure that all of these landmarks are fully implemented. They should have the necessary attributes and values
- Inconsistent Use: Maintain consistency in your use so that users have a more cohesive experience on your website
- Don’t Overuse Them: At the risk of repeating what we have mentioned before, while these attributes can improve accessibility, excessive use can lead to clutter and confusion. Focus on the most critical sections of your site
To Sum Up
These landmarks are a powerful tool for improving web accessibility. They allow you to cater to users of different abilities and help them navigate and interact with websites more effectively. They also help you with SEO for charity websites. But understanding how they work and implementing them correctly will help you (or your web developers) create a more inclusive online experience for your visitors.
For more information on how to improve website accessibility, you can read our post on How to Improve Charity Website Accessibility: A 15 Points Guide.
