WAI-ARIA stands for Web Accessibility Initiative - Accessible Rich Internet Applications. It is a suite that defines a way to make web content and web applications accessible to people with disabilities. It is especially effective for use with dynamic content and controls created with Ajax, DHTML, and JavaScript.

There are many ways that modern web applications are not accessible to people with disabilities.

Some examples include:

• Multi-level tree navigation, where the lower levels are hidden underneath plus or arrow icons and not visible until the icon is clicked, requires the ability to see and click in small areas as well as the recognition that there is content there to be displayed.
• Drag and drop functionality requires the ability to use a mouse and keyboard.
• On dynamic web pages that change due to user actions or time- or event-based updates, the changes will not be seen by people using assistive devices or who are blind.

WAI-ARIA helps define how this information can be provided to assistive devices. In fact, until WAI-ARIA came along, the Web Accessibility Initiative expressly recommended against using JavaScript (or Ajax or DHTML) because it is not accessible (per Web Content Accessibility Guidelines Checkpoint 6.1).

Accessibility is important because in the United States and many other countries there is a legal obligation to make pages accessible if they do business with the government.

In fact, in 2008, Target settled a lawsuit with the National Federation of the Blind where they paid damages of $6 million. They made no admission that their site was ever inaccessible, but that was the basis of the initial suit.

How WAI-ARIA Helps

The first thing that WAI-ARIA does is help improve keyboard navigation. HTML 4 introduced the tabindex attribute to help define the order that elements should be tabbed between. This attribute was only valid for the following elements:

• A
• AREA
• BUTTON
• INPUT
• OBJECT
• SELECT
• TEXTAREA

The tabindex attribute accepts a positive value between 0 and 32767. And when the tab key is hit, the focus moves through the elements in numerical order. The only exception is elements with a tabindex="0" attribute. These are visited in the order they appear in the document.

ARIA extends the tabindex attribute so that it can be used on any visible element. It also allows you to use a negative integer (e.g. -1) to indicate elements that should not be included in the tab order. You can then change the tab order programmatically using JavaScript.

The WAI-ARIA role Attribute

The most common use of WAI-ARIA is the role attribute. This attribute helps assistive devices to determine what the element is—in other words, what it is semantically within the web application.

This is important because you can use nearly any HTML element to create a widget in a web application. HTML does not have elements to define things like sliders, tabbed navigation panels, timers, trees, and so on. But with WAI-ARIA roles, you can tell assistive devices exactly which elements on your pages have what roles, making it easier for them to provide that information to their users effectively.

ARIA also helps you define sections of your page or the structure of the entire document. These are used alongside HTML5 sectioning elements to help define your page for assistive devices. These are called document landmark roles, and they are:

• article
  Usage: role="article"
  This should be placed on elements that contain content that stands alone in its own right. Things like articles, blog posts, and so on. If you use HTML5 sectioning elements, you would use this role on the ARTICLE element.
• banner
  Usage: role="banner"
  This should be placed on elements that contain content related to the naming of the site. Things like the logo, page title, and tag lines. If you use HTML5, you could use this role on the primary HEADER element on the page.
• complementary
  Usage: role="complementary"
  This should be placed on elements that contain content that supports the main content of the page. Like the article role, this content can stand on its own, but it's not the primary focus of the page. Things like sidebars, advertising, and related links. In HTML5 you can use this role on the ASIDE element.
• contentinfo
  Usage: role="contentinfo" Place this role on elements that contain content that is peripherally related to the main content. Things like footnotes, endnotes, copyright statement, privacy information, and so on. This content is often found in the HTML5 FOOTER element.
• main
  Usage: role="main"
  This role belongs on the container elements for the content that is the main focus of the page. Things like the main content column. In HTML5, you would most likely use this on a SECTION element.
• navigation
  Usage: role="navigation"
  This should be placed on elements that define the navigation for the page or the entire website. Use this on the HTML5 NAV element.
• search
  Usage: role="search"
  Place this role on elements that contain a search box to search the page or site. You can use this role on HTML5 INPUT type search elements.

In order to use the roles, you simply add a role attribute to the element it defines:

<nav role="navigation">
?
</nav>
<div id="mySlider" role="slider">
?
</div>

Once you have defined the roles on your web pages, people who use accessibility browsers like JAWS will have an easier time navigating the page. The tools use the roles to focus first on the main content and then read the article.

Other readers who come to your site using standard web browsers will not be affected by the WAI-ARIA roles. So there is no reason to avoid using WAI-ARIA roles, they can only make your site more effective.