ARIA and accessibility: Live updates

  • Author: Richard Corby
  • Date: 22 Feb 2013

This four-part series explores different accessibility issues that can be solved by using Accessible Rich Internet Applications (ARIA).

On modern websites, interface controls such as show/hide and controls to select personal preferences are very common. However, these types of features are often inaccessible to users who can't use a mouse or an alternate pointing device — typically screen reader users.

A screen reader understands standard HTML code very well but interface controls (also called rich internet applications) are created using JavaScript or Ajax. These technologies have no standard way to tell another program, like a screen reader, what that behaviour is.

This is where ARIA (Accessible Rich Internet Applications) comes in. ARIA is used to give meaning, or semantics, to interface controls so a screen reader can use them. As we become more familiar with these kinds of interactive controls and start to expect them, these features become crucial for being able to use a website, so it's extremely important that they are made accessible.

Media Access Australia's article Introduction to WAI-ARIA: It's accessibility but not as we know it says that accessibility guidelines like WCAG 2.0 focus on design principles and aim "to be technology-neutral so they could apply to more situations".

On the other hand, ARIA uses specific commands to tell assistive technology, such as screen readers, what's going on. For example, if an event happens on a webpage such as an updated sports score, the assistive technology program being used to help a person with a disability will notice the change and provides the user with access to the new content."

ARIA solves these main areas of accessibility problems with web applications:

Live updates

The problem

A characteristic of rich internet applications is areas of dynamic content, individual or groups of elements that refresh without the whole page reloading. This is used by news sites to show the latest articles and by social media sites to show new messages automatically.

There are two key accessibility challenges with dynamic content:

  1. A screen reader user may not be aware that a particular section of the website has been updated.
  2. The updated content may cause disorientation when a section of a page updates without them having any control over the changes or being alerted.

The solution

ARIA can be used to identify dynamic content updates as Live Regions. When information changes within a Live Region, the user is alerted and the updates voiced depending on the values specified.

The following values can be use with the <aria-live> attribute:

  • aria-live="off" — used for low importance updates that are not announced to the user.
  • aria-live="polite" — used for status updates or new messages and notifies the user when they complete the task they are on.
  • aria-live="assertive" — for important updates such as error messages, it announces content changes almost immediately.

Live Regions allow a great degree of flexibility in how dynamic content updates are presented to users and allows users more control over their web experience.

View ARIA Live Regions on Yahoo! Search (close captioned) on YouTube.

 

This is the second article in a four-part series by Richard Corby, web accessibility expert and partner at Webbism.