ARIA Landmark Roles

ARIA is a W3C specification that stands for “Accessible Rich Internet Applications”.  Its overall purpose is more fully described on the help page ARIA for Web Applications.

One of the easiest ARIA features to implement, and one that provides significant immediate benefits to screen reader users, is landmark roles. There are eight of these roles, each representing a block of content that occurs commonly on web pages. To use them, simply add a relevant role attribute to an appropriate container within your HTML. Then, screen reader users can quickly jump to that section of the page. The eight ARIA landmark roles are:

  • role=”banner”
  • role=”navigation” (e.g., a menu)
  • role=”main” (the main content of the page)
  • role=”complementary” (e.g., a sidebar)
  • role=”contentinfo” (meta data about the page, e.g., a copyright statement)
  • role=”search”
  • role=”form”
  • role=”application” (a web application with its own keyboard interface)

If a role is used more than once on a page, the aria-label attribute should also be used in order to distinguish between the two regions. For example, a web page might have the following two navigation regions:

  • <div role=”navigation” aria-label=”Main menu”>
  • <div role=”navigation” aria-label=”User menu”>

Caution: Be Careful Using role=”application”

When role=”application” is used, there is an expectation that the application has its own model for navigating and operating all controls by keyboard, and help text is easily available so users can learn the keystrokes. When assistive technologies encounter content that’s marked up with role=”application”, they stop listening for users’ keystrokes and hand off all functionality to the application. This can be problematic as it defies users’ expectations. Keys that normally perform certain functions when using their assistive technology suddenly stop providing that functionality.

Therefore you should use role=”application” only when an application has been carefully developed with accessibility in mind, and steps have been taken to inform users of what to expect.