Using ARIA landmarks to bypass blocks of content, and provide programmatic structure.

From WCAG WG


Status


User Agent Notes [To be published separately]

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

Note: plugin for firefox that allows keyboard access without AT is in development on Github

Applicability

As of this writing this technique applies to HTML technologies.

This technique relates to:

Description

The purpose of this technique is to provide an easy way to skip over blocks of content that are repeated on multiple pages and provide programmatic structure to a page. For instance, if there is a common navigation menu found on every page, landmark roles (or "landmarks") can be used to skip from section to section, and to 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. 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.
  • 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.
  • application: A region declared as a web application, as opposed to a web document.

Example

Example 1

The following example shows how landmarks might be added to an HTML4 and XHTML 1.0 document. Th AT user or keyboard only user can use the landmarks to jump over sections of a page that they are not interested in.: 

<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, 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>

Resources

Related Techniques

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.)
  3. Examine whether at least one landmark appears after a block of content that is repeated on multiple pages

Expected Results

Tests #1, #2 and #3 are true.

Retrieved from "https://www.w3.org/WAI/GL/wiki/index.php?title=Using_ARIA_landmarks_to_bypass_blocks_of_content,_and_provide_programmatic_structure.&oldid=2974"