ARIA
Overview
As you rely on built-in HTML semantics, you may run into special circumstances that just don't feel right, like building an accessible pop-up menu or an accessible alert. HTML doesn't ship with native elements that account for these common UI patterns, so we need another way of communicating with accessibility tools. Thus is WAI-ARIA: the Web Accessibility Initiative's Accessible Rich Internet Applications, or ARIA for short.
Take, for example, a <div> you are using as a checkbox. You might format the HTML as such:
<div tabindex="0" class="checkbox">The "checkbox" class allows a user to visibly interact with the div, and tabindex inserts it into the tab order, but what about users who rely on a screen reader? Assistive technology won't intuitively understand that you meant for this div to act as a checkbox. ARIA provides a convenient workaround; take the previous example and apply ARIA techniques.
<div tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">The role attribute tells assistive technology to read this container as a checkbox, while the aria-checked attribute allows assistive technology to convey the value of the checkbox to the user.
Note | Many native HTML elements don't require use of the role attribute. By declaring the type of an <input> tag, a screen reader doesn't need an additional role attribute. For example, the following code suffices on its own:
<input type="checkbox">
The power of ARIA
ARIA is incredibly powerful for assistive technology. The following list attempts to provide a brief introduction to some of what ARIA can do:
- <aria-label> is an added description that is only shared with assistive technology.
- <aria-controls> is an attribute that relates two or more semantic HTML elements.
- <aria-live> is an attribute that allows for information to be immediately shared with the user.
ARIA doesn't replace functionality
Adding a <role> attribute to an HTML element does not automatically provide the associated JavaScript to make that element function as intended. For example, a <div> tag with a <role="checkbox"> attribute doesn't make the div work as a checkbox. That functionality must be added with custom JavaScript, which is why using semantic HTML elements is more efficient and robust.
<aria-label>
The <aria-label> attribute is specific to the element in which it resides. The <aria-label> will override any other label, such as a <label> element, therefore it is most useful for when you have a visual indication of an element that needs to be translated for assistive technology.
<aria-labelledby>
The <aria-labelledby> attribute references some label within the document flow. Here is an example:
<th id="finput">
<input type="text" name="name1" arial-labelledby="finput">
<input type="text" name="name2" arial-labelledby="finput">
<input type="text" name="name3" arial-labelledby="finput">As you can see, multiple HTML tags can reference the same label, and the 'label' doesn't actually have to be the native <label> tag.
<aria-describedby>
The <aria-describedby> attribute is similar to the <aria-labelledby> attribute. It references any HTML element as additional description. For example, you might use a <label> for a password <input>, with an <aria-describedby> attribute to reference password requirements, as in:
<label for="pw">Password</label>
<input type="password" id="pw" aria-describedby="pw-help"><div id="pw-help">Password must include at least one number.</div>Resources | ARIA