- 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
- 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">
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
Where Can I Get More Information about ARIA Landmark Roles?