Introduction to ARIA for Web Accessibility

What is ARIA?

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications), often referred to as ARIA, is a defined technical specification for attributes in the HTML language. The goal of ARIA is to make web content and web applications more accessible to people with disabilities.

Many people turn to assistive technologies, like screen readers, to make it possible or easier to use the web. While they’ve greatly helped people who may have been more excluded from digital content in the past, assistive technologies aren’t always able to work with dynamic web content or advanced user interaction elements (such as drag-and-drop functionality).

In order to understand how to best present websites to a user, assistive technologies need to understand the semantics of web elements and content. ARIA is intended to provide these semantics, enhancing and improving the accessibility of user interfaces and dynamic content.

A (gentle) technical introduction to ARIA

The semantics of ARIA are separated into two major categories: first, ARIA roles; and second, ARIA states and properties that are supported by these roles.

ARIA Roles

Roles in ARIA are HTML attributes that define how a particular HTML element functions semantically within the document. For example, the code below describes a save button that is defined using the ARIA role “button”:

<div id="saveChanges" tabindex="0" role="button">Save</div>

The majority of ARIA roles fall into two categories: widget roles and document structure roles. Widget roles (such as “button”) describe how the element should be presented to the user. Some examples of ARIA widget roles are:

• “checkbox”: used for checkable interactive controls.
• “dialog”: used for application dialogs or windows, usually placed atop the page content with an overlay.
• “log”: used for regions where new information is added in a meaningful order and old information may disappear (such as chat logs, error logs, or message queues).
• “progressbar”: used for regions that display the status of a task in progress.

Document structure roles, on the other hand, describe how a particular element is organized within the page. Some examples of ARIA document structure roles are:

• “grid”: used for elements that contain one or more rows of cells.
• “toolbar”: used to group together elements that form a toolbar.
• “textbox”: used for elements that allow users to enter freeform text.
• “figure”: used for images, code excerpts, and other non-textual content that conveys information.

ARIA States and Properties

States and properties in ARIA are HTML attributes used to enhance ARIA roles with additional information about a role's current or anticipated state. There are three main functions for ARIA states and properties:

• Describing the state that a given ARIA widget is in.
• Defining the regions of a page that are likely to receive updates and new information.
• Defining the regions of a page that can be used for drag-and-drop functionality (drag sources and drop targets).

For example, the code below describes a form that requires users to enter their first name and last name using the “aria-required” attribute:

<form action="post">

     <label for="firstName">First name:</label>

     <input id="firstName" type="text" aria-required="true" />

     <br>

     <label for="lastName">Last name:</label>

     <input id="lastName" type="text" aria-required="true" />

     <br>

     <label for="streetAddress">Street address:</label>

     <input id="streetAddress" type="text" />

 </form>

Some examples of ARIA states and properties are:

• “aria-checked”: used to describe a checkbox element that should be checked by default.
• “aria-valuemax”: used to describe the maximum value allowed for a widget such as a slider or progress bar.
• “aria-readonly”: used to define a particular field as not editable by the user.
• “aria-busy”: used to describe an element that is currently being updated automatically.

Here to help with ARIA and all your accessibility needs

ARIA is a deep technical specification, and requires an in-depth knowledge of the proper roles, states, and properties in order to be maximally useful. To learn more about ARIA and other web accessibility standards, follow the Bureau of Internet Accessibility blog or contact our accessibility experts for a free 30-minute consultation.