ARIA Blog series: Landmark Roles and Page Structure

Share on FacebookShare on LinkedInShare on Twitter

Deep blue computer monitor with code.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.

Usage

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.

Example

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.

 

<ul  role="navigation">

<li><a  href="about.html">about us</a></li>

<li><a href="about.html">contact us</a></li>

<li><a href="collaboration.html">collaborations</a></li>

</ul>

 

<div role="main">

<p> ARIA specification allows you to make complex applications accessible; however, using ARIA to do simple things is simple.</p>

<p>.....</p>

</div>

 

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.

Top part of the Deque 'About Us' page using the roles 'navigation', 'banner', and 'search'.

Main content of the Deque 'About Us' page with role 'main' and side bar with role 'navigation'.

Deque footer with role contentinfo and aria-label = footer.

 

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).

Right:

<div role="main>

<h1>.......</h1>

<p>.........

</div>

Wrong:

<h1 role="main">.......</h1>

<p>.........

Wrong:

<span  role="main> </span>

<h1>.......</h1>

<p>.........

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.

Steps

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.

Example:

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>

Example

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.

 

Application role

Applications are a landmark roles to a region of the page representing a unique software unit executing a set of tasks for its users.

Example

<div role="application" aria-labelledby="calendar" aria-describedby="info">

<h1 id="calendar">Calendar<h1>

<p id="info">This calendar shows the game schedule for the Boston Red Sox.</p>

<div role="grid">

....

</div>

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.

 

 

Sources:

http://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page

WAI-ARIA Best Practices

 

[hs_action id="6657"]

About 

For over fifteen years, Deque has been helping major corporations, government agencies, and other organizations ensure that their websites and mobile apps are accessible to everyone. We have more than fifteen years of history of serving the federal government, including undertaking the biggest accessibility program that's occurred in the United States government or anywhere. Deque also works with .edu's and mission-focused nonprofits to ensure that their materials and systems are usable and barrier free for users with disabilities. The company invented the first accessibility plug-in software, the first web-based testing platform, and the first server-based accessibility solution. All of these have been created in the service of helping our customers become accessible, advance the goals of their organization, and remove barriers for all users on the web.

4 comments

Leave a Reply

You can use these HTML tags:

<a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>