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

article: 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.
banner: Site-orientated content, such as the title of the page and the logo.
complementary: 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.
contentinfo: Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on.
main: Content that is directly related to or expands on the central content of the document.
navigation: Content that contains the links to navigate this document and/or related documents.
search: 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

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

Class Example (Before, Problems, After )

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

The Juicy Studio Accessibility Toolbar – Go to ARIA and select Roles.
Use Jim Thatcher’s Favelets and select Landmarks
JAWS has a landmark keyboard navigation in virtual mode that allows users to quickly skip to landmarks

Web Accessibility

Basic HTML Accessibility Techniques