Accessibility in Web Development: ARIA Attributes

Accessibility is an important part of web development and becoming an increasingly pressing legal concern. There are many aspects to making a website ADA-compliant, such as semantic markup and keyboard navigability. Few tools are as crucial towards ADA compliance as HTML5's new ARIA attributes.

Accessible Rich Internet Applications:
What is ARIA? 

ARIA, which stands for Accessible Rich Internet Applications, is a set of HTML attributes that define ways to make websites more accessible to people with disabilities.

How do these attributes contribute to a website's accessibility?

Some of these attributes include role, aria-hidden, and aria-expanded. Each ARIA attribute attempts to convey some piece of information to an accessibility tool such as a screen reader or speech to talk to ease the experience of disabled users and ensure that disabled users can access all parts of a site accessible to abled users.

ARIA Roles

Arguably the most common ARIA attribute is role. The role attribute can be used to give semantic meaning to an HTML element. This can be used to describe page or content block landmarks, such as headers and footers, or used to describe an element based on how the element should be used. For example, role="main" is used to declare an element as the container for the main page content, whereas role="button" declares that the element functions as a button, even if the element is not actually a button tag.

Proper HTML structure can cut down on how many ARIA roles are necessary. For instance, using HTML5 semantic elements, such as <header>, <main>, or <footer>, will convey the proper page-level landmark role to accessibility tools, e.g. role="main" for <main>. Similarly, using a button tag for a button will communicate to accessibility tools that the element is a button without needing to add the button role to the element.

ARIA Property/State and Relationship Attributes

Other than role, the other extremely common ARIA attributes are those tied to application property/state management. These roles, such as aria-hidden, aria-haspopup, or aria-expanded, are used to convey to accessibility tools an element's properties, e.g. aria-haspopup communicates that an element such has content that will pop up from it in some form, or an element's state, e.g. aria-hidden expressing whether or not the element is visible. Some other examples of this are aria-label, aria-disabled, and aria-checked for form fields. This can be used to ensure that assistive tools keeps their users informed about application property or state changes, such as when a modal pops up or when a dropdown comes out of a navigation menu.

An equally common type of ARIA attribute are those that communicate relationships between elements whose relationship is not obvious in markup. The two biggest examples of this type of attribute are aria-labelledby and aria-describedby. Both of these can tell a screenreader that one element is labelled by or described by another element where ADA compliance requires a label or text description of the content.

Live Region ARIA Attributes

While these are the most commonly used ARIA attributes, there are also ARIA attributes, called live region attributes, to convey that an element's content may change without the element having focus. These live region attributes also help assistive technologies on how to process on-the-fly content updates depending on what live region attribute, if any, was assigned to the element. An example of when to use this attribute is a digital clock that constantly ticks and updates whether the user is actively using the widget or not.