Accessible Rich Internet Applications (WAI-ARIA) 1.0

Accessible Rich Internet Applications (WAI-ARIA) 1.0

The best place to begin understanding and exploring the Web Accessibility Initiative’s Accessible Rich Internet Applications (WAI-ARIA) project is their own Overview page. It describes the project’s purpose, the problems ARIA addresses, and provides documentation and strategies for implementing ARIA in Web applications. It also presents examples.

image used as callout, developer Jesse James Garret definition of Ajax, 2005

Jesse James Garrett defining AJAX, 2005

Web developers began exploring ways to make web pages more interactive and their inner workings less obtrusive at least as early as the mid 90s. The IFRAME (inline frame), which embeds one web page within another and provides the developer with means to show or hide the embedded frame’s borders or control scrolling was one such way. One approach was to set up a button that, when clicked, used JavaScript to change the source of the iframe, or reload it with specific parameters that could themselves be manipulated and updated dynamically using JavaScript. Before long they realized they could bypass the inline frame altogether, get the information they wanted invisibly in the background by HTTP request, and insert it into an existing element, or alter the document object (DOM; “M” is for document object “model”) by appending or removing elements (WikiPedia retrieved Jan. 2, 2011; Garret, 2005).

But it was also quickly discovered that changing the DOM dynamically did not make assistive technologies happy.  Some paradigms, drag and drop for example, systematically excluded users who could not manipulate a mouse. “WAI-ARIA addresses these accessibility challenges by defining how information about this functionality can be provided to assistive technology. With WAI-ARIA, an advanced Web application can be made accessible and usable to people with disabilities.” (WAI-ARIA Overview)

ARIA accomplishes this by defining a standard descriptive nomenclature for the things users who can click typically click on, and the areas of the page in which content appears and may change in response to user interaction. Key to this are roles—e.g., this is a toolbar, this is a menu item; states—this panel is folded or invisible, this one is displayed; properties—this menu has a drop-down, this one a pop-up. Such roles, states and properties would be meaningless if Web browsers and assistive technologies were not designed to respond to them, so WAI provides recommendations and documentation to address this in the application programming interfaces (APIs) of such technologies.

First steps to making an application accessible:

  1. Each element or widget has correct and complete semantics that fully describe its behavior (using element names or roles);
  2. The relationships between elements and groups are defined;
  3. States, properties, and container relationships are valid for each element’s behavior and are accessible via the Document Object Model [DOM] and the platform accessibility API; and
  4. Keyboard focus should be maintained for the duration of the user’s interaction with the application.
  5. All interactive components should be keyboard operable.
    WAI-ARIA 1.0 Primer, 3. Building Accessible Applications

ARIA presents a huge amount of information. Its effective and efficient implementation seems incumbent on framework developers and developers of software authoring tools, not just on individual Web application developers.


  1. Web Accessibility Initiative (updated 18 January 2011), WAI-ARIA Overview, http://www.w3.org/WAI/intro/aria.php retrieved November 12, 2010, January 21, 2011).
  2. WAI-ARIA 1.0 Primer (W3C Working Draft 16 September 2010), http://www.w3.org/TR/wai-aria-primer/
  3. Garrett, Jesse James (2005), Ajax: A New Approach to Web Applications, http://www.adaptivepath.com/ideas/essays/archives/000385.php retrieved Dec. 15, 2010

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: