ARIA landmarks are attributes you add to elements to create semantically defined sections of a page that allow users of assistive technologies to navigate the page more easily. Think of ARIA landmarks as building a set of “skip to” links like “skip to main content”. You can add ARIA landmarks to define the following regions.
- application
- banner
- complementary
- contentinfo
- form
- main
- navigation
- search
By adding these landmarks you are in essence building a set of “skip to” links to allow users to jump to any of these sections and know what the function of each section is.
ADDING ARIA LANDMARKS
Adding ARIA landmarks is very simple. You just need to add an attribute like role=”main” to the appropriate encompassing element. For example, if you have
<div id=”mainConent” role=”main”>…</div>
everything within the <div> will be considered the main content of the page. Similarly, if you have
<div id=”nav” role=”navigation”>…</div>
the contents of that <div> will be defined as the navigation section.
In addition to the role attribute, you can also add the aria-labelledby attribute to explicitly label each section. This is useful for a role like “complementary” where some part of the page is not considered the main point of the page but compliments the main point. A user can jump to this complementary section and know what it is about. For instance, on an “About Us” page on a school Web site that is describing the school, there might be a section off to the side that is showing live score updates from the sports teams. The score information is complementary to the main point of the page but still has important meaning. The code for something like this would look like
<div id="mainContent" role="main"> About Us .... </div> <div id="scores" role="complementary" aria-labelledby="scoresLabel"> <h3 id="scoresLabel">Live Scores</h3> ... </div>
This way the user knows exactly what is in the complementary section. Adding ARIA landmarks will have no visual impact on your page so they are an easy way to add more accessibility to your Web page.
DOES THIS MEAN I DON’T HAVE TO PROVIDE A SEPARATE “SKIP TO” LINK?
ARIA Landmarks are fairly well supported in screen readers so most users will be able to take advantage of them. There are some older screen readers that don’t support them and some users with newer screen readers might not know how to use this feature. The most helpful data we have on this comes from WebAIM’s screen reader survey. While it shows a 42% increase in awareness of ARIA landmarks over the past year, only 40% of people indicate they use them, and a full 30% still don’t know that the functionality event exists. That being said, if you only provide ARIA landmarks you will be meeting the letter of the law in terms of providing a way to easily skip repetitive navigation, but not providing the traditional “skip to” links will probably make your site more difficult for some screen reader users to navigate. As with almost everything on the Web, we live in the in-between times where newer and better technologies are out there but adoption isn’t high enough to make it the de facto standard. For now, I would still include the “skip to” links in addition to ARIA landmarks.
ON THE IMPORTANCE OF LABELING YOUR LANDMARKS
As I have been evaluating two different sites, both of which use ARIA landmarks, but only one of which uses aria-labelledby, I have come to appreciate how much power labeling the landmark has. On the site without the labels there were multiple navigation landmarks, but I didn’t know what each one did. On the site with labels, as I navigated to each landmark it announced the label so I knew exactly what the function of that landmarks was. Additionally, when I used JAWS to generate a list of all of the landmarks, the list included the label for each landmark. So in the case of three navigation regions, again, I could instantly know what the function of each landmark was without having to navigate to each and find that out.
A WORKING MODEL OF ARIA LANDMARKS
Here is a working model of ARIA landmarks with explanations for how to use the various roles.