Traditional enhancements to web pages for disabled users have been limited to:
adding a caption to tables (along with using tables for actual tabular data)
placing a “skip to navigation” link at the top of the page.
ensuring that all uses of
:hoverin our CSS also have an equivalent rule for
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,
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:
|Landmark Role||Applicable HTML Tag(s)||Use|
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.
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.)
Denotes a user-editable form.
Denotes a specialized form devoted to search. Should be applied to the
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:
<div id=”header” role=”banner”>
In an upcoming article, I’ll provide a complete addition of roles to an HTML page.