ARIA Basics

What is ARIA?

ARIA, which stands for Accessible Rich Internet Applications, refers to a set of more than 150 declarations that can be added into web page code so assistive technologies, such as screen readers, can understand how to present the page. For example, the text "Home" might be visually presented as a heading, an interactive link or button, or as the label for a phone number. If the web code does not declare what the element containing that text represents, a screen reader cannot present it to a blind user in an accessible way.

The declarations that can be made with ARIA are defined by the WAI-ARIA Specification. These attributes and other features required to make sites usable by people who rely on assistive technologies or keyboard navigation are not natively included in the languages used to create web sites, such as HTML, JavaScript, CSS, and SVG. The W3C Web Accessibility Initiative's (WAI) Accessible Rich Internet Applications working group (ARIA WG) is addressing these deficiencies through several W3C standards efforts. The WAI-ARIA Overview provides additional background on WAI-ARIA, summarizes those efforts, and lists the other documents included in the WAI-ARIA suite.

What Are Accessibility Semantics?

Accessibility semantics refer to the meaning of user interface elements that need to be conveyed to assistive technology users in order for those users to understand and use the elements. For example, people who can visually perceive a search icon button understand the element can be activated to perform a search by the way it is styled and positioned. To make that icon accessible to a screen reader user, one of the semantics that needs to be communicated is that the element represents an interactive button. This is accomplished by encoding the element in a way that enables browsers to determine that the accessibility role of the element is button. Similarly, another accessibility semantic browsers must be able to convey for the search icon is its accessible name, which inturn enables screen reader users to know the purpose of the button.

The types of accessibility semantics that may be required to make an element accessible include:

• Role: The type of element, e.g., button or list. ARIA includes more than 80 roles that can be declared in content.
• Properties: Attributes that provide information about the nature of an element, such as its name, orientation, or position in a set.
• State: A dynamic property, such as selected, checked, or disabled, whose value may be changed by users or application events.