demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Adding WAI-ARIA Landmark Roles To Web Pages For Enhanced Accessibility

accessibility

Estimated reading time: 2 minutes, 30 seconds

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

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
bannerheader

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).

navigationnav

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

mainmain

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

complementaryaside

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.)

contentinfofooter

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

formform

Denotes a user-editable form.

search

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

<div role="banner">

For HTML5:

<header role="banner">

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

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.