Traditional enhancements to web pages for disabled users have been limited to just a few steps:
- adding
accesskeyandforattributes to forms and site navigation - modifying
linktags to include navigation to logical previous, next, and help pages. - adding a caption to tables (along with using tables for actual tabular data)
- writing descriptive
altvalues for images - 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: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.
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 | Equivalent HTML5 Tag | Use |
|---|---|---|
banner | header | 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. |
navigation | nav | Used to denote areas used for navigating the page or site. |
main | main | The primary content of the document. Should be used no more than once per page. |
complementary | aside | 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.) |
contentinfo | footer | Supplementary material that describes the ownership and context of main: copyright information, footnotes, and links to privacy statements, etc. |
form | form | Denotes a user-editable form. |
search | 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:
<header role="banner">Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
