Traditional enhancements to web pages for disabled users have been limited to just a few steps:

While they are a good start, these practices are minimal concessions to disabled users. The recent WAI-ARIA landmark specification substantially expands and improves on these practices, providing screen readers for the blind, such as JAWS for Windows or VoiceOver for the iPhone with clear labels for each major component of a web page, allowing users to navigate your pages easily. This is primarily achieved through a new attribute, role.

You’ll find that some of the ways role is used overlap with existing HTML5 tags: the primary difference is that in many cases role values should be used just once, to designate primary areas of the page. In time, I expect accessibility devices will use role or HTML5 tags; for now, I would still use roles on an HTML5 page. (role can equally be applied to XHTML pages, where it has even greater purpose).

There are many, many possible values for role. Here, I’ll just focus on those most applicable to the majority of web pages, via the use of “landmarks” to denote the purpose of important areas:

WAI-ARIA Landmark Roles
Landmark RoleEquivalent HTML5 TagUse

Used for banner content that is primarily site-oriented, rather than being specific to a particular page. The banner may include the logo together with the page title, site search and navigation. role=”banner” should only be used on one element per page (usually at the very start).


Used to denote areas used for navigating the page or site.


The primary content of the document. Should be used no more than once per page.


Content related to the main content that remains meaningful even if separated from the document. (Not applicable to comments, but possibly to pullquotes or sidebars.)


Supplementary material that describes the ownership and context of main: copyright information, footnotes, and links to privacy statements, etc.


Denotes a user-editable form.


Denotes a specialized form devoted to search. Should be applied to the form element.

There are also roles that describe document structure and other interface elements, but we’ll leave those for another time.

Roles are very easy to add to your page:

<header role="banner">

Enjoy this piece? I invite you to follow me at to learn more.