HTML5 Accessibility Chops: ARIA landmark support

Posted on Monday, 11 July 2011 by Steve Faulkner

The ARIA landmark roles can be used in HTML5 to markup regions of a page. Landmark roles add a new means to navigate page content for users of supporting assistive technology. They can be used on semantically neutral elements such as the div element or they can be added, to HTML5 elements that have  implied semantics such as header or footer, to fill in current gaps in accessibility support.

ARIA Landmark usage

ARIA landmarks are present on many popular sites, for example:

Landmark Role Current Support

ARIA landmark roles are currently supported by:

  • NVDA and JAWS when using Internet Explorer 9 or Firefox 3+.
  • VoiceOver when using Safari on iOS 4+
  • Orca (Linux screen reader) using Firefox 3+ supports landmarks (not tested).

Detailed results of testing for JAWS, NVDA, VoiceOver and Window eyes

What does supported mean?

Users can navigate page content using ARIA landmarks

For JAWS 10-12 landmark keyboard navigation in virtual mode is:

  • next landmark ; (semi-colon)
  • previous landmark SHIFT + ; (semi-colon)
  • list landmarks CTRL + INS + ; (semi-colon

For NVDA 2011.2 the landmark keyboard combination in virtual buffer mode is:

  • next landmark D
  • previoius landmark shift + D
  • list landmarks (and list/headings) NVDA + F7

VoiceOver users can navigate a page via landmarks (if present), by choosing ‘landmarks’ in the ‘web rotor’, then finger flicking up or down will move to the next or previous landmark.

Important Note on role=application:

When navigated to, role=application causes some screen readers to change modes. Therefore application role must only be used on interactive content for which the application mode is appropriate. It is to be used with extreme caution! The article JAWS support for ARIA is a must read for understanding how JAWS modes work and how JAWS interacts with role=application. Also worth reading When should you use ARIA role=”application”? and Not All ARIA Widgets Deserve role="application".

Addendum:

Roger johannson reports that VoiceOver on OSX 10.7 Lion now supports ARIA landmarks:

VoiceOver now lets you use ARIA landmarks, if they are present, to navigate web pages. If Quick Nav is active you can use the w and W keys to navigate to the next or previous landmark. When you use the arrow keys to navigate around a page, VoiceOver announces when you enter and leave landmarks, including the type of landmark (for example “Leaving main landmark, entering complementary landmark”).

Further information about landmark roles:

 


About Steve Faulkner

Steve is the Senior Web Accessibility Consultant and Technical Director, TPG Europe. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at Vision Australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C HTML Working Group and the W3C Protocols and Formats Working Group. He is an editor of several specifications at the W3C including HTML 5.1, Using WAI-ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility

Comments

  1. Quality article, These roles provide a method to programmatically identify commonly found sections of web page content in a consistent way. I had a view that they can be used on (X)HTML where you prefer, but great to hear that it used now proficient with HTML5. Thanks a lot for the information.

Comments for this post are closed.

Recent Posts

See all posts in the blog archive

Thank you a million times over. We got exactly what we wanted, when we were told we would get it, at the price we were quoted, and far more valuable than we expected. I wish all our vendors were this effective and professional.

Mark Stender, V.P. Finance and Business, Pearson