The Need for HTML ARIA

Lesson Objective

After completing this lesson, you will be able to describe the purpose of ARIA.

Time to complete

10 minutes

Video

Introducing ARIA and ARIA Roles video (1:34) and slide

Lesson

HTML content can be decorated with JavaScript handlers to create small islands of interactivity within simple web content. This turns static HTML content into dynamic HTML widgets.

But for more dynamic widgets, like buttons and menus, there is no way for accessibility aids, like screen readers, to discover the purpose of a particular widget by analyzing the HTML and JavaScript alone.

To bridge this gap, the accessibility community has created a widely deployed standard called WAI-ARIA (Web Access Initiative-Accessible Rich Internet Applications). For brevity, in this class, we refer to it as just ARIA. ARIA adds a few simple attributes at runtime. It provides a means for adaptive technology to discover the purpose of a dynamic widget by examining the HTML Document Object Model (DOM).

As the web developer, you might be asking, “Why are you making me do something extra? My HTML has a menu element, and the JavaScript causes it to expand and collapse. When users interact with it, it behaves like a menu, so why do I need to do anything else?"

The interactivity added via scripting introduces an interesting accessibility challenge; if no additional steps are taken, when the page has loaded, the screen reader does not know whether the menu, for example, is expanded or collapsed.

Adding ARIA to your HTML and JavaScript involves assigning a role and a state to your dynamic widgets.

In the next few lessons, you will take well-marked up HTML content and apply the ARIA framework to create more accessible websites.

A Note About Frameworks

It's likely that you are using a JavaScript framework or library to more quickly develop your web application. These provide differing levels of built-in support for making your website more accessible to users of adaptive technology (e.g., screen readers). In this course, we used the Angular.js and Bootstrap.js frameworks to build the web application. However, you only need to use plain HTML5, CSS and JavaScript when completing the coding activities in the following lessons. With that said, keep the following in mind as you begin applying what you have learned in this course within your own website(s):

  1. Learn what accessibility features are already provided by the framework you are using. (For this course, we removed some of the accessibility features provided by Angular.js and Bootstrap.js in order to provide an opportunity for you to add these features as you might need to in your own web application.)
  2. If you discover that your framework fails to produce the right accessibility annotations, you may need to take additional steps to ensure your application is accessible to your users. The techniques you have learned in this course should work across frameworks, as well as for pure HTML and JavaScript.
  3. Once you have made these modifications, consider contributing your accessibility improvements back to the framework or library’s codebase so other developers and users will benefit from your work.

Resources