4. Robust
Introduction to WAI-ARIA
Contents
An important and recent addition to the family of accessibility standards created by the W3C is WAI-ARIA. This acronym stands for “Web Accessibility Initiative,” the W3C subgroup that created the standard, and “Accessible Rich Internet Applications,” the name of the standard itself. Here we touch on WAI-ARIA without going into much detail. It is primarily aimed at developers who create custom web applications and widgets using non-standard HTML. For example, a developer might create a checkbox out of an HTML <div>
element. WAI-ARIA allows a developer to assign checkbox semantics to that <div>
, like its role (i.e., role="checkbox"
) and its state (i.e., aria-checked="true"
or aria-checked="false"
), so when it is encountered by an assistive technology, the technology recognizes that <div>
as a checkbox.
What is a <div>
?
The <div>
tag defines a division or a section in an HTML document.
The <div>
element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.
You were indirectly introduced to some of the semantics described in the paragraph above in Activity 1. As you were navigating through the Showcase demo website, you would have heard a number of WAI-ARIA elements announced by your screen reader.
As part of what you are learning here, just knowing of the existence of WAI-ARIA will be sufficient. Here, we will provide an overview of how it works and when it should be used, along with an example you can try with your screen reader to develop a little practical experience with it.
Static vs. Dynamic WAI-ARIA
Though primarily aimed at developers and programmers, there is some WAI-ARIA that can be used in a static form. That is, a person writing HTML can write WAI-ARIA right into the HTML. The landmark navigation elements you were introduced to earlier is one example of a static use of HTML. These landmarks are a type of role, specifically used to define regions on a web page. There are eight landmark roles, listed here.
WAI-ARIA Landmark Roles
- Banner
- Navigation
- Main
- Complimentary
- Contentinfo
- Search
- Form
- Region
Other roles can also be used statically, though it is generally necessary to update their associated states and properties using JavaScript. Let’s take the WAI-ARIA semantics for a menu as an example. The main WAI-ARIA elements for defining menus are as follows:
Roles
- menubar (defines a role for a container, typically a top level list, where multiple submenus are present)
- menu (the role assigned to each submenu)
- menuitem (the role assigned to each item in a submenu)
Properties
- aria-haspopup (assigned to menu items that are the parent of a submenu that can be opened)
- aria-activedescendant (the ID value of the menu item that is currently active)
- aria-describedby or aria-labelledby (refers to the ID of an element containing a description of the menu or instruction on how to operate it)
States
- aria-expanded