Skip to content

Technique ARIA11:Using ARIA landmarks to identify regions of a page

Applicability

Technologies that support Accessible Rich Internet Applications (WAI-ARIA).

This technique relates to:

Description

The purpose of this technique is to provide programmatic access to sections of a web page. Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.

They also provide an easy way for users of assistive technology to skip over blocks of content that are repeated on multiple pages and notify them of programmatic structure of a page. For instance, if there is a common navigation menu found on every page, landmark roles (or "landmarks") can be used to skip over it and navigate from section to section. This will save assistive technology users and keyboard users the trouble and time of tabbing through a large amount of content to find what they are really after, much like a traditional "skip links" mechanism. (Refer to User Agent Notes above for specifics of AT support). A blind user who may be familiar with a news site's menu, and is only interested in getting to the top story could easily navigate to the "main" landmark, and bypass dozens of menu links. In another circumstance, a user who is blind may want to quickly find a navigation menu, and can do so by jumping to the navigation landmark.

Landmarks also can help sighted keyboard-only users navigate to sections of a page using a browser plugin.

Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute is the name of the landmark. These role values are listed below:

  • banner: A region that contains the prime heading or internal title of a page.
  • navigation: A region that contains navigation links links to other pages or different parts of the same page.
  • main: A region that contains a page's main content.
  • region: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A region landmark isn't exposed as a landmark region unless it has an accessible name.
  • form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
  • search: A region of the page containing search functionality.
  • complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
  • contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.

There are cases when a particular landmark role could be used more than once on a page, such as on primary and secondary blocks of navigation. In these cases, identical roles should be labeled using a valid technique for labelling regions.

Landmarks should supplement native semantic markup such as HTML headings, lists and other structural markup. Landmarks are interpretable by WAI-ARIA-aware assistive technologies and are not exposed by browsers directly to users.

It is a best practice to include all content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content.

Examples

Example 1: Simple landmarks

The following example shows how landmarks might be added to an HTML document:

<div role="banner">site logo and name, etc. here</div>
<div role="search">search functionality here</div>
<div role="navigation">a list of navigation links here</div>
<div role="form">a sign-up form here</div>
<div role="main">the page's main content here</div>
<div role="region">a sponsor's promotion here</div>
<div role="complementary">sidebar content here</div>
<div role="contentinfo"> site contact details, copyright information, etc. here </div>

Example 2: Multiple landmarks of the same type and aria-labelledby

The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a page, each instance may have a unique label specified using aria-labelledby: 

<div aria-labelledby="site-nav-heading" role="navigation">
  <h2 id="site-nav-heading">Site</h2>
    <ul>
      <li><a href="...">nav link 1</a></li>  
      <li><a href="...">nav link 2</a></li>
      <li><a href="...">nav link 3</a></li>
   </ul>
</div>
<div aria-labelledby="related-nav-heading" role="navigation">
  <h2 id="related-nav-heading">Related Topics</h2>
    <ul>
      <li><a href="...">topic link 1</a></li>
      <li><a href="...">topic link 2</a></li>
      <li><a href="...">topic link 3</a></li>
    </ul>
</div>

Example 3: Multiple landmarks of the same type and aria-label

The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more 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 aria-label="Site" role="navigation">
   <ul>
      <li><a href="...">nav link 1</a></li>
      <li><a href="...">nav link 2</a></li>
      <li><a href="...">nav link 3</a></li>
   </ul>
</div>
<div aria-label="Tags" role="navigation">
   <ul>
      <li><a href="...">tag link 1</a></li>
      <li><a href="...">tag link 2</a></li>
      <li><a href="...">tag link 3</a></li>
   </ul>
</div>

Example 4: Search form

The following example shows a search form with a "search" landmark. The search role typically goes on the form element or a div surrounding the form: 

<form role="search">
   <label for="product-search" id="search-label">Search</label>
   <input id="product-search" placeholder="title, author, or ISBN" type="text">
   <button type="submit">Find Books</button>
</form>

Other sources

No endorsement implied.

Tests

Procedure

  1. Examine each element with a landmark role.
  2. Examine whether the correct element has been used to mark up content. For example: a navigation role has been used to mark up a section with navigation links, or the main role is used to contain the page's main content.
  3. If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.

Expected Results

  • #1, #2, and #3 are true.
Back to Top