Landmark Roles

  • The WAI ARIA specification defines a set of specialised “landmark” roles.
  • Provide a method to programmatically identify commonly found sections of web page content in a consistent way.
  • Can be used in all flavors of (X)HTML.
  • Allows assistive technologies to provide users with features which they can use to identify and navigate to sections of page content.
  • ARIA landmark use example

Definition of Commonly Used Roles

Content that makes sense in its own right, such as a complete blog post, a comment on a blog, a post in a forum, and so on.
Site-orientated content, such as the title of the page and the logo.
Supporting content for the main content, but meaningful in its own right when separated from the main content. For example, the weather listed on a portal.
Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on.
Content that is directly related to or expands on the central content of the document.
Content that contains the links to navigate this document and/or related documents.
This section contains a search form to search the site.

A full list of roles are available in the WIA-ARIA Roles Model specification document.

Assistive Technology Support

  • Landmark roles are supported in JAWS, NVDA, Chromevox, Window Eyes and VoiceOver
  • Detailed information about current assistive technology support – ARIA Landmark Roles Tests
          • Jaws 11/12/13 has complete support.
          • ChromeVox has complete support.
          • VoiceOver supports all landmarks except “form”.
          • NVDA supports all landmarks except “application” and “form”.
          • Window Eyes does not support ARIA landmarks.

Sectioning Elements in HTML5

  • Sectioning elements in HTML5 have some overlap with ARIA landmark roles, but in a majority of of cases there is no equivalent for the ARIA landmark roles in HTML5.
  • Until there is full support from Assistive Technologies for sectioning elements best practice is to use both HTML 5 tag and ARIA element <nav role="navigation">
  • Comparison of ARIA landmark roles and HTML5 structural elements

Techniques for adding landmark roles

Add a role attribute to a container element, using the most appropriate role value for the content of the container, for example: <div class="content" role="main">

Class Example

WCAG 2.0 Guideline

Guideline 2.4 Navigable: Provide ways to help users navigate

2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

Suggested Tools for Checking Navigation

Where Can I Get More Information about ARIA Landmark Roles?