This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

From WCAG WG

Status

• Surveyed by TF March 19, 2012
• 1 Nov 2012: Ready for Review

• WG survey 14 Jan 2013

Using ARIA Landmarks

User Agent Notes

• Jaws V.11 and greater has complete support.
• ChromeVox V.1 and greater has complete support
• VoiceOver V.3 and greater supports all landmarks except “form”.
• NVDA 2 supports all landmarks except “application” and “form”.
• Window Eyes as of V.7 does not support ARIA landmarks.

Applicability

As of this writing this technique applies to HTML technologies.

This technique relates to:

• Success Criterion 1.3.1 (Info and Relationships)

Description

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

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.
• complementary: Any section of the document that supports but is separable from the main content, but is meaningful on its own even when separated from it.
• contentinfo: Meta information which applies to the first immediate ancestor whose role is not presentation.
• 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.
• main: Main content in a document.
• navigation: A collection of links suitable for use when navigating the document or related documents.
• search: The search tool of a Web document.

ARIA also defines the following role which is not a landmark and may not be included in AT lists of landmark regions.

• region: A generic area of a page that may not be covered by other types of landmarks. It can be used in conjunction with aria-label or aria-labelledby to provide a custom label for that section of the page.

Example

Example 1

The following example shows how landmarks might be added to an HTML4 and XHTML 1.0 document:

<div id="header" role="banner">A banner image and introductory title</div>
<div id="sitelookup" role="search">....</div>
<div id="nav" role="navigation">...a list of links here ... </div>
<div id="content" role="main"> ... Ottawa is the capital of Canada ...</div>
<div id="rightsideadvert" role="complementary">....an advertisement here...</div>
<div id="footer" role="contentinfo">(c)The Freedom Company, 123 Freedom Way, Helpville, USA</div>

Example 2

The following example shows a best practice of how landmarks might be added to an HTML4 and XHTML 1.0 document in situations 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 3

The following example shows a best practice of how landmarks might be added to an HTML4 and XHTML 1.0 document in situations where there are more than 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>

Example 4

The following example shows a best practice of how a generic "region" landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.

<div role="region" aria-label="weather portlet"> 
...
</div>

Example 5

The following example shows a best practice of how a generic "region" landmark might be added to a stock ticker portlet. There is existing text on the page that can be referenced using aria-labelledby.

 
<div role="region" aria-labelledby="t1"> 
<h2 id="t1">Stock Ticker Portlet</h2> 
...
</div> 

Resources

WAI ARIA 1.0 Authoring Practices

Related Techniques

• G1: Adding a link at the top of each page that goes directly to the main content area
• G123: Adding a link at the beginning of a block of repeated content to go to the end of the block
• G124: Adding links at the top of the page to each area of the content
• H69: Providing heading elements at the beginning of each section of content (HTML)
• H50: Using map to group links (HTML)
• SCR28: Using an expandable and collapsible menu to bypass block of content (Scripting)
• ARIA-XX: Using Aria landmarks to skip over blocks of content

Tests

Procedure

1. Examine each element where a Landmark role attribute is present.
2. Examine whether the Landmark attribute is applied to the section of the page that corresponds with that role. (i.e., the "navigation" role is applied to a navigation section, the "main" role is applied to where the main content begins.)

Expected Results

Tests #1 and #2 are true.