Hands-on With ARIA: Accessibility Recipes for Web Apps | How To

In the confusing world of applications, can help improve and ease of use for your creations. HTML isn’t able to handle many types of relationship between elements on the page, but is ideal for almost any kind of setup you can come up with. Let’s take a look at what is, how it can apply to your web app, and some quick you can use for your own sites.

Basics of ARIA

ARIA, also called WAI-ARIA, stands for the Web Accessibility Initiative–Accessible Rich Internet Applications. This initiative, updated by the W3C, aims to give developers a new set of schemas and attributes for making their creations more accessible. It specifically aims to cover the inherent gaps left by HTML. If you’re not familiar with what it does already, you should take a look at our primer on ARIA. You might also be interested in our pieces on ARIA for the Homepage, and ARIA for eCommerce.

Briefly though, ARIA has three main features that we’ll be focusing on:

  1. Creating relationships outside of the parent-child association: HTML only allows for relationships between parent and child elements, but the associations we want to define aren’t always nested within each other. ARIA let’s us define element relationships outside of this constraint.
  2. Defining advanced controls and interactivity: HTML covers many basic UI elements, but there are many more advanced controls that are used around the web that are hard to define outside of their visual component. ARIA helps with that.
  3. Providing access to “live” area update attributes: the aria-live attribute gives screen readers and other devices a listener for when content on the page changes. This allows for easier communication of when on-screen content changes.

ARIA and Web Applications

Before, we had looked at adding ARIA to the common elements of eCommerce pages and site homepages. With web apps however, each one differs drastically from the last. Forms and functions shift between each app, and often even between versions of the same app. Because of this, we’ll treat our implementations here more like recipes in a cookbook rather than a wholesale conversion of a page.

When it comes to web apps, a user’s intent is more difficult to discern in a generalized sense. With eCommerce, no matter which site you are on, it is likely that the visitors are looking to purchase a product or service. Web serve a variety of purposes, so instead, we’ll focus on creating nuanced controls that are accessible and user friendly.

Let’s get into some of these control types.

Controlling Live Updates with Buttons

The first control we’re going to look at is a displayed value updated by a button press. These types of controls are commonly seen where an element is displaying a quantity that may be adjusted by buttons labelled ‘+’ and ‘’, but can take many forms, such as arrow buttons that let you cycle through predefined statuses.

A standard implementation can leave some gaps in understanding for the user. It is unclear what elements the buttons affect, how they affect them, and when the element’s value changes.

Below, we’ll use ARIA to create a connection between the buttons and the value display element using the aria-controls attribute. Then, we’ll make it clear what the use of the buttons are using aria-label and HTML . Finally, we’ll utilize the aria alert role and the aria-live attribute to let our user know when the value is being updated.

Let’s take a look at what that code looks like:


You might also like More from author

Leave A Reply

Your email address will not be published.