Traditional enhancements to web pages for disabled users have been limited to:

• adding access key and for attributes to forms and site navigation

• modifying link tags to include navigation to logical previous, next, and help pages.

• adding summary and caption to tables (along with using tables for actual tabular data)

• writing descriptive alt and title text for images

• placing a “skip to navigation” link at the top of the page.

• ensuring that all uses of :hover in our CSS also have an equivalent rule for :focus

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. The video below demonstrates how landmark roles have practical purposes for disabled users:

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:

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. For XHTML:

1. <div id=”header” role=”banner”>

For HTML5:

1. <header role=”banner”>

In an upcoming article, I’ll provide a complete addition of roles to an HTML page.