Almost every web-savvy user will realize that the web is changing and for good reason. Due to the increase in demand for responsive web applications, static-enabled sites are being replaced by dynamic web apps (that make extensive use of scripting languages). In fact, many designers today are building widgets and advanced user interface controls using a combination of JavaScript, HTML, CSS and AJAX technologies. Users with disabilities typically use assistive technologies in order to interact with web-based widgets and controls.
However, users who rely on assistive technologies like screen readers sometimes encounter difficulties when accessing dynamic web content and applications, if these have not been designed with accessibility in mind. For instance, JavaScript holds a reputation for not being accessible to users using certain assistive technologies.
Detailed View on Accessibility Problem
Many JavaScript toolkits comes with a library of client-side widgets that emulate the behavior of well-known desktop interfaces. Several useful widgets like sliders, navigation bars, and more can be built by using a combination of JS, HTML and CSS. The problem is that the HTML4 specification did not support built-in tags that illustrate these widgets semantically. As a result of this, developers have had to make use of generic elements such as ‘div’ and ‘span’.
Although, using the generic elements results in a widget that appears just like its desktop counterpart, it lacks the required semantic information in the markup – the very same markup that is used by an assistive technology. This results in some users being unable to view dynamic content. Besides, live twitter feed updates and similar content, make alterations to the DOM that an assistive technology (AT) may not be familiar with.
This is where WAI-ARIA comes in.
Before understanding what WAI-ARIA is and how it helps to overcome the accessibility problem, let us first consider an example, where markup for the “tabs” widget is created without using ARIA.
When the above code is executed, the users will visually see a tabbed widget. However, the machine-readable semantic that most assistive technologies need is not available.
Introduction to WAI-ARIA
ARIA or WAI-ARIA, the “Accessible Rich Internet Applications Suite” – is a W3C’s Recommendation that defines a way to make web content and applications accessible to users with disabilities. More specifically, WAI-ARIA enables developers to add more attributes to the markup, so as to help users identify features to interact with. This includes the complex controls that most websites and web-based applications are using today.
The WAI-ARIA specification consists of three different attributes: roles, states, and properties. These WAI-ARIA attribute types help developers with the following:
- Roles describe some of the well-known UI widgets presents that are not available in HTML – be it sliders, tabs etc. They also describe page structure including headings, tables, etc.
- Properties describe the state of widgets. For instance, whether a widget is “draggable”, has a popup associated with it and so on.
- States describe whether an element can interact or not. Putting it simply, ‘states’ inform the assistive technology whether the state of element is busy, disabled, selected, or hidden.
By adding WAI-ARIA attributes to HTML markup, assistive technologies are able to interact with JavaScript controls. They do this in a manner that is similar to the way these technologies interact with desktop equivalents.
Now let us consider an example. Let’s say, a markup for the “tabs” widget with WAI-ARIA attributes added.
WAI-ARIA is supported in all the modern browsers like Chrome, Firefox, IE, Safari and Opera. In fact, several assistive technologies also support ARIA. Additionally,JavaScript widget libraries typically include WAI-ARIA markup.
How to Make Presentational changes With WAI-ARIA?
In order to make dynamic presentational changes, CSS is used. This is because it facilitates changes in the appearance of content and is namely used for showing or hiding it. The dynamic presentational changes include:
State changes: WAI-ARIA provides three type of attributes to determine the state of a UI widget, such as:
- aria-checked: declares the current state of a checkbox / radio button.
- aria-disabled: specifies to check whether an element is visible, but cannot be edited.
- aria-grabbed: defines an object’s ‘grabbed’ state in a drag-and-drop operation.
Visibility changes: In case changes are made to content visibility (that is the content is hidden or shown), it is important for developers to change their aria-hidden property value accordingly. During CSS declaration, developers can hide an element visually by using the CSS attribute ‘display:none’.
Role changes: Lastly, WAI-ARIA empowers developers to introduce a semantic role for each element – that offers inaccurate or no semantics. For example, while using an unordered list for creating a menu, the ‘ul’ should assigned a role of ‘menubar’ and ‘li’ should be assigned a role of ‘menuitem’. A word of caution: make sure to keep the role of the element the same. It shouldn not be changed. However, you can choose to get rid of the original element and substitute it with an element with a new role.
Wrapping Up
The web as we know it will continue to evolve. Websites are nowadays built using advanced JavaScript and AJAX controls. This is sometimes creating accessibility issues with some users as they become unable to interact with these controls. Fortunately, this issue can be tackled using WAI-ARIA (the Accessible Rich Internet Applications Specification), as it provides a way to make dynamic web content as well as web applications accessible.
Want to learn more?
If you’d like to brush up on Accessibility and get industry-relevant skills, then consider taking the online course on Accessibility. This will earn you an industry-recognized Course Certificate that can advance your career. If, on the other hand, you want to go over the basics of UX and Usability, you could take the online course on User Experience. Good luck on your learning journey!
(Lead image: Depositphotos)
