Skip to navigation content (Press Enter).

Accessible Rich Internet Applications

Lesson 3 of Section 4

In the previous section we briefly described the process by which assistive technology interacts with web pages and applications. First, the user agent loads the contents of the web page the content is stored and organized in the Document Object Model (DOM). The assistive technology uses an accessibility API to interface with the user agent. The accessibility API collects relevant data and metadata from the DOM's UI elements and presents an equivalent accessibility tree to the assistive technology. The assistive technology then interprets the accessibility tree in a way that the end user can perceive and interact with.

diagram-of-assistive-technology-interaction-with-user-agents Text Summary of Diagram

Accessible Rich Internet Applications

Accessible Rich Internet Applications (ARIA) is a technical specification that defines a standard for increasing the accessibility of dynamic web pages. The ARIA specification details the standard practices of adding semantic meaning to html elements by way of additional properties. Those properties will then be interpreted by an accessibility API to build the accessibility tree, providing a way for assistive technologies to properly handle the elements.

Creating ARIA Widgets

Roles

Roles are defined as an attribute of an HTML element. A role applies a taxonomic scheme to the function of a widget. Defining a role to an element can affect the way an assistive technology presents the any contained information. It can also allow browsers to enable more intuitive keyboard navigation for widgets with complex structures. The role exposes the function of the widget to accessibility APIs.

As an example, consider a <div> tag which is intended to dynamically display an error message. If the tag is given the role 'alert', assistive technologies can be expected to alert disabled users to changes in the tag's content.

<div id='error-message' role='alert'> </div>

It is important to note that ARIA roles should not be dynamically updated. Changing an ARAI role within the DOM does not reflect changes to the accessibility tree. If an element needs to change roles, it should be deleted, and replaced with a new element.

See a list of ARIA roles.

States and Properties

Properties are attributes that describe the relationships between elements in user-widgets. For example the 'aria-controls' property describes the relationship between an input and output element. Properties expose a wide variety of semantic information about parts of a UI widget to accessibility APIs.

States are attributes that describe the relationship between elements and function of the user-widget. For example the 'aria-checked' state is used to describe whether an option is checked. Semantic information about the state of a UI widget is often exclusively visual, therefore care should be taken that ARIA states fully describe an accessible UI widget.

See a list of ARIA states and properties.

Test Your Knowledge

Take the test or continue to the next lesson

Sources

Service Bulletins

  • MAC ID Password Expiry

    Beginning in May 2016, MAC ID passwords at McMaster expire annually. Learn more at www.mcmaster.ca/uts/macid

Service Desk

Client Self Service:
https://servicedesk.mcmaster.ca
Hours: Monday - Friday
8:30 am - 4:30 pm
Phone: 905-525-9140 x24357 (2HELP)
Email: uts@mcmaster.ca
Location: Main Campus BSB Rm. 245
Service Catalogue:
http://www.mcmaster.ca/uts

Great Idea Site

Great Idea