ARIA Landmark Roles

Introduction: ARIA stands for Accessible Rich Internet Applications. This is a W3C specification for adding mark up to HTML and is consumed by assistive technologies including screen readers. Adding such mark up clearly communicates the intent of the various elements of a Web Page.

ARIA Landmark roles: ARIA Landmark roles define key areas of content on the page. These allow screen readers to understand the semantic structure of the page. So the structure of the page to be conveyed visually to users should be programmatically achieved using these roles.

There are 8 common ARIA landmark roles, these are:

role=”banner” (e.g. in header)
role=”navigation” (e.g., menu of links)
role=”main” (the main area of the page)
role=”complementary” (e.g., a sidebar)
role=”contentinfo” (e.g. footer containing legal terms)
role=”search”
role=”form”
role=”application”

These roles are shown in the diagram below for a sample web page style. This shows the first 5 ARIA landmarks, viz. banner, navigation, main, complimentary and contentinfo.

The above page design is somewhat common and developers can include these landmarks in their HTML and make this page much better understood by accessible technologies such as screen readers. A sample HTML showing these roles for the above layout is shown below (minus CSS):

Additionally if this layout had a search box and also a form, then the additional 2 landmark roles would also be used as shown in screen shot below.

Several screen readers including Voice Over, JAWS and NVDA support these roles.

The land mark role of application indicates to the screen reader that area (the element and all its children) should be treated as a desktop application and not like HTML page. This should be very rarely required to be used. Some known places where this has been used is in certain parts of Gmail, Google Docs and CKEditor. This is used for extremely sophisticated use-cases which are unlikely to occur for vast majority of web applications.

HTML 5 elements

HTML 5 has elements which are similar to ARIA landmarks as shown in table

Screen readers have a better support for ARIA landmarks than for their equivalent HTML elements. Hence it is recommended that even if developers are using the HTML 5 elements from the table above they also use ARIA Landmark roles.

Conclusion: Using ARIA Landmark roles will enable assistive technologies to better convey the web page information to the end user. It is therefore recommended that such roles be used while developing web pages.