The web-site is now in readonly mode. Login and registration are disabled. (28 June 2019)

Use WAI-ARIA landmark roles in new & existing development projects

Cloud created by:

Nick Freear
5 February 2013

The World Wide Web Consortium (W3C) published Accessible Rich Internet Applications (WAI-ARIA) 1.0 as a "Candidate Recommendation" in January 2011.

This defines "roles" and in particular landmark roles. Landmark roles complement (or replace) the idea of a "skip" link -- they inform assistive technologies like screen readers that parts of Web page are "navigation", the main content, complementary information (think, a news feed in a side block), and so on. The AT can then announce the landmark to the end-user, for example when the whole page is read aloud by a screen reader, or when a page outline is displayed.

I strongly suggest that they should be adopted for all new and existing Web development projects, because:

  1. They are widely understood by screen readers, including JAWS, NVDA and Window-Eyes;
  2. They are HTML attributes not elements, so older browsers silently ignore them;
  3. And, therefore they are low-risk;
  4. They can be used with HTML 4, XHTML 1/1.1 and HTML5.

The landmark roles are:

  • application
  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search

I've used landmark roles on recent projects including Track OER and the OUICE-based site theme for the OU Media Player. You can view source to search for them.

WAI-ARIA roles in HTML5

If you choose to use the new HTML5 'sectional' elements use the WAI-ARIA role too -- that is [nav role=navigation] ... [/nav]. There is more consistent support for WAI-ARIA roles among assistive technology than there is for the sectional elements.

There are some example code snippets and useful links below.

Extra content

Embedded Content

HTML5 boilerplate with WAI-ARIA landmark roles (HTML)

HTML5 boilerplate with WAI-ARIA landmark roles (HTML)

added by Nick Freear

HTML5 boilerplate with WAI-ARIA landmark roles (Haml)

HTML5 boilerplate with WAI-ARIA landmark roles (Haml)

added by Nick Freear

Contribute

Contribute to the discussion

Please log in to post a comment. Register here if you haven't signed up yet.