This post is part of my blog series on using ARIA. This post talks about using ARIA landmark roles. You do not have to have read the previous parts to understand it, but if you want to, here they are: How to use ARIA: An Introduction, Making an Accessible Form with ARIA, Part 1, and Making an Accessible Form with ARIA, Part 2.
Roles: navigation, contentinfo, search, banner, main, application
States and properties: aria-labelledby, aria-label
ARIA Landmark roles (or "landmarks") break the page into easy to navigate sections. Landmarks let all users know the different sections of a page, the flow of the page and its overall structure. This allows users to jump between sections and navigate through the page.
Adding landmark roles is simple to do and greatly enhances the user experience. The WAI-ARIA Best Practices document by the W3C explains:
"The presence of common, semantic, navigation landmarks allows each site to support the same standard and allows your assistive technology to provide a consistent navigation experience - an important feature for screen readers and alternate input solutions. For users with cognitive and learning disabilities the landmark information could be used to expand and collapse these regions of your page to aid in simplifying the user experience by allowing the user to manage the amount of information processed at any one time.
There are also mainstream benefits of providing navigation landmarks. Your browser may assign key sequences to move focus to these sections as they can be set on every site. Navigation to these landmarks is device independent. A personal digital assistant (PDA) could assign a device key to get to them in your document."
To use landmark roles, simply put the appropriate role on the containing element. It is best practice that all content sits in a landmark region to ensure no content is orphaned. This way a screen reader user can safely use landmark navigation without missing content.
In this example, roles of navigation were put on the navigation list that contained the navigation links. The main content was in an element with the role main.
<li><a href="about.html">about us</a></li>
<li><a href="about.html">contact us</a></li>
<p> ARIA specification allows you to make complex applications accessible; however, using ARIA to do simple things is simple.</p>
Available landmarks are:
- application - A region declared as a web application, as opposed to a web document.
- banner - A region of site specific content, such as the identity of the site sponsor, etc.
- complementary - A supporting section of the document, designed to be complementary to the main content. Example: Sports News and Business News on a typical news page. It should be meaningful when separated from the main content
- contentinfo - A large region that contains information about the parent document. Example: footer of copyrights and links to privacy statements.
- form - A region of the document that represents a collection of form elements. (In HTML the HTML form element can be used instead). Note: you should use the search role and not the generic form role for search forms.
- main - The main content of the document. Typically following the navigation regions.
- navigation - A collection of navigational elements. Example: a left navigation area.
- search - A region that contains a search widget.
You can also use the generic "region" role when a more specific role is not applicable. Always use a label (such as aria-label or title) with a region role so that users know the role of the region.
Authors should set a landmark role on the containing element that encompasses the entire region.
(However, if some of the content is not DOM descendants, you can include them into the region by using the aria-owns attribute).
<span role="main> </span>
Do: Use landmark roles on container elements.
Do: Make sure all your content is inside a container with a landmark role.
Do not: Overuse them by embedding them inside a container with the same role or putting them on small containers that should not be in a short page summary or on empty containers.
1. Identify the logical structure of your page and define the navigation roles.
Break up your page into perceivable blocks of content that belong together. These are called "regions".
Note: in an application, you can further break down each region into logical regions as needed. This is addressed further in the section on composite roles.
2. Label the regions and set properties.
Once you have defined each region, you should label it (best practice). This becomes more important if the same landmark role is used more than once on a page. The start of each region should have a perceivable header and it should be used to label the region or use the aria-labelledby attribute. Alternatively you can use aria-label and add a title there. The drawback of not providing a label is that users will not know the purpose of the region.
Regions would be included in a summary of a page. If an assistive technology were to summarize, it would be unable to provide information about the section without a label.
The following example shows a best practice of landmarks where there are more than two of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a Web page, each instance may have a unique label specified using aria-labelledby:
<div id="leftnav" role="navigaton" aria-labelledby="leftnavheading">
<h2 id="leftnavheading">Institutional Links</h2>
<ul><li>...a list of links here ...</li> </ul></div>
<div id="rightnav" role="navigation" aria-labelledby="rightnavheading">
<h2 id="rightnavheading">Related topics</h2>
<ul><li>...a list of links here ...</li></ul></div>
The following example shows two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.
<div id="leftnav" role="navigaton" aria-label="Main Navigation">
<ul><li>...a list of links here ...</li></ul> </div>
<div id="rightnav" role="navigation" aria-label="Secondary Navigation">
<ul><li>...a list of links here ...</li> </ul></div>
If the structure is complex, then other properties and states may be needed. This will be further discussed in my next blog on compound widgets.
Applications are a landmark roles to a region of the page representing a unique software unit executing a set of tasks for its users.
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<p id="info">This calendar shows the game schedule for the Boston Red Sox.</p>
In an Application region, assistive technologies might return browse navigation keys back over to the web application in this region. Make sure there are no elements inside your application that are not part of the application.
To be honest, I would recommend only using an application role if you really know how to manage the keyboard and focus yourself. And even then make sure you test that behavior with screen readers.
More on applications will be discussed in the next blog post on Applications and Composite Roles.