UI Development

Accessibility of dynamic content

With emergence of rich internet applications, it has become increasingly hard to create accessible web content. But accessibility is not optional, it is required by the law in most countries for government websites to be accessible. Also any popular web site you can think of is probably accessible.

Creating accessible web applications is not really as hard as its said to be, all it requires are few good practices and thinking of accessibility first. Yes!!! Think of accessibility first before you start working on something, because we don’t simply add accessibility. We write code with accessibility in mind every step of the way. Especially when using unusual practices, hacks and clever solutions make sure what your are doing is accessible.
Lets address for now the most common accessibility problem of the modern web development – The dynamic content. There are different types of dynamic content and different accessibility practices associated with them. Lets dive into some of the basic things to get you started with accessibility of dynamic content.

role=“alert”

As the name suggests the role alert is used on important and time sensitive information. When reading the alert the information thats currently being read by assistive technology(AT) is interrupted.

Syntax:

Usage:

  1. The role=“alert” is present on element which is present and displayed at the page load time. In this case the content in alert is read on page load after the page title. Eg: Most important info on page load.
  2. The Element with role=“alert” is dynamically inserted into the page. In this case the content in alert is read once the element is inserted into the DOM. Eg: Dynamic content is often inserted in to the page, if the content is important and time sensitive this method can be used.
  3. The role=“alert” is dynamically added to an element. This is done in order to read the information which which has become more relevant at some point of time. Eg: Expected format for a password can be read when it doesn’t match the requirement.
  4. Element with role=alert” is present on element which is present but is hidden using ‘display: hidden;’ in CSS. The element is displayed dynamically when necessary. Eg: Content is often hidden and shown on the page, if the content is important and time sensitive this method can be used.
This can also be used in cases like form submission failed or successful.
While alert role is very useful for time sensitive info, there is much more suitable role when there is an interactive control associated with the element.i.e. role=“alertdialog”. While alertdialog is an important topic, the interactive components like ‘dialog’, ‘alertdialog’ and ’tablist’ would take a blog of their own.

aria-live

The attribute ‘aria-live’ is used when updates to the content inside an element need to be tracked by the ATs.
The attribute ‘aria-live’ can take one of the following values ‘polite’, ‘assertive’ and ‘off’.
The most often used value is ‘polite’, while ‘off’ is the same as no aria-live being used and ‘assertive’ is value used when the info is important and time sensitive and need to be read immediately.
The dynamic changes in aria-live=“polite” are announced politely, they wait for user to be idle making sure the user is done interacting instead of responding to every minor interaction. The aria-live=“assertive” sounds similar to role=“alert” because, using alert role an element implies the element has aria-live=“assertive” on it. But alert role should only be used on static text content unlike aria-live=“assertive”. Also remember aria-live=“assertive” is almost never used, unless you know very well about what you are doing.

Syntax:

Note that aria-live is often used on elements with role=“region”. But it can also be used on roles like “log”, “status”.

aria-atomic

The ‘aria-atomic’ is used along with ‘aria-live’ to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes. It takes the values ’true’ and ‘false’. Default value is ‘false’.

Syntax:


In the syntax example no matter which section is changed or if a new section is inserted, all the content in live region will be announced.

 

aria-relevant

The ‘aria-relevant’ is used along with ‘aria-live’  to set what types of changes are relevant to a live region.
The attribute takes one or more of the values ‘additions’, ‘removals’, ‘text’, ‘all’. Default setting is ‘additions text’.
The value ‘additions’ means nodes that are added to the DOM.
The value ‘removals’ means nodes that are removed from the DOM.
The value ’text’ means changes to text content of any node.
The value ‘all’ is equivalent to ‘additions removals text’, the combination of all the other values.

Syntax:

In the example above only DOM nodes added or removed from the live region are announced by ATs.

 

The concepts mentioned here are more basic and simple. There is much more to learn about creating accessible components like dialogs, tabs widget, navigation, etc. So, go ahead and explore how to creating these components with accessibility in mind.

About The Author