.png)
Using standard HTML alone, modern web apps can lock out users with accessibility needs.
HTML is the predominant markup language online, being used by nearly 83% of existing websites. While there have been some changes in the 25 years since its creation, even newer iterations, such as HTML5 and AMP, leave a lot to be desired—especially when it comes to accessibility. That’s where ARIA comes in. In this tutorial, I’m going to talk about what ARIA is, why it’s useful for your site, and a couple of ways it can be added to your site.
What Is ARIA?
ARIA, also known as WAI-ARIA, stands for The Web Accessibility Initiative’s Accessible Rich Internet Applications. The full specifications document can be found here. Note that the full spec document is fairly dense, so it might be a good idea to start by reading this post and checking out some of the other resources I link below.
The main purpose of ARIA is to allow for advanced semantic structure within HTML as a counterpart to HTML’s syntax-heavy nature. In other words, HTML tells the browser where things go, and ARIA tells it how they interact.
Who Is Responsible for ARIA?
ARIA is a project hosted by the W3C (World Wide Web Consortium). The project adheres to the same standards for updating and editing as their other initiatives. They also provide a GitHub repository of several tests you can run to make sure your page is running properly.
What’s Wrong With My Current Site Markup?
Most sites that have a structured, well-thought-out design do well enough when it comes to adaptive technologies (i.e. screen readers). However, having a user being able to figure out how to use your site and having it be easy to use are different things. Low-vision users make up almost 2% of the population, and for them, the difference can mean saving a significant amount of time and detective work when trying to perform basic online tasks. It can be the difference between offering visitors a spectacular experience and providing a maze for them to navigate.
Beyond traditional means of accessibility, ARIA is finding its way into technologies that provide new takes on standard interaction. An increasing number of voice systems, aggregated browsing (like car-embedded computers, for example), and other innovations are putting ARIA to use, taking advantage of its increased semantic capabilities.
Okay, But What Does It Do?
Overall, ARIA connects elements together in a semantically meaningful way. It provides the user with additional meaning regarding interaction. Here are some real-world examples of how it might be used:
- Associating non-nested elements: With plain HTML, the user’s browser can only see relations based upon parent/child relationships. In some situations, however, we may want a series of buttons parallel to the content in the HTML hierarchy. With ARIA, we can define what type of controller each button is, and what element it controls elsewhere in the document.
- Declare interactive elements: While HTML provides a handful of elements for interactivity, ARIA defines dozens more, allowing for more granular descriptions of what each element of your page can do. In addition, these can be assigned to HTML tags that wouldn’t be commonly used for such a purpose but might make sense in your specific case. For example, you might use the
<li>tag for a series of checkboxes that you prefer not to be composed of form elements. - Live area update notifications: Another feature that ARIA provides is the definition of a “live” content area. When a content area is defined in this way, ARIA will notify the user whenever content within that element changes. This can be useful when making sure low-vision users know that something has changed on your page.
Adding ARIA to Your Web Pages
We’ve talked about what ARIA can do, so now let’s look at some of the most common examples. We’ll start each section with a brief statement of the goal we are looking to accomplish, followed by a code sample of how to accomplish it.
Creating Alternative Labeling With ARIA
When it comes to alternative labeling, most developers are familiar with the alt attribute commonly used on <img> tags. This tag serves an important purpose: describing the image it is attached to for increased accessibility (or as a common SEO tactic, depending on your perspective).
ARIA provides a similar attribute called aria-label that can be attached to any HTML element, improving accessibility for not only images, but site sections, form controls, and more. Here’s an example of what that looks like:
<!-- adding alternative labeling to an image (with non-visible text) --> <img aria-label="Descriptive image text" src="http://code.tutsplus.com/#" /> <!-- adding alternative labeling to an image (with visible text) --> <img aria-labelledby="image-text-desc" src="http://code.tutsplus.com/#" /> <div id="image-text-desc">A text description of the image, visible on the screen</div>
Defining ARIA-Specific UI Elements
HTML already provides a number of elements for the creation of web pages, but their main focus is typically to define an area generically and present the user with the site’s structure. ARIA provides a few dozen additional elements that focus more heavily on how an element is used, such as a timer, tooltip, or progress bar.
An example use here is a tooltip that you might find on a form. There are a number of ways to create one, ranging from a link that triggers some JavaScript to an element that creates a modal when hovered over. The missing piece here is that despite how it might work for sighted users, low-vision users might not ever even know that the tooltip exists.
You can define a tooltip using ARIA like so:
<!-- Defining a question mark image as a tooltip UI element --> <img src=”questionmark.png” role=”tooltip” />
Available ARIA Definitions
To expand on these UI elements, here’s a brief list of some of the most interesting “roles” that can be defined. The full listing is available in the referenced specification document.
searchbannerpresentationtoolbarstatusmenuitemlogdialoglink
Establishing Relationships Outside of the Parent/Child Structure
Now let’s expand on a point that we talked about earlier: the forced structure of HTML. While the parent/child relationship is good for deciding how things should be ordered, it falls short when more meaningful connections are needed. An example of this is sibling elements. Some libraries have added the ability for siblings or other forms of element relationships to be traversed, but this typically happens in JavaScript or another language outside of the markup.
ARIA gives us the ability to define these relations right in the markup, making it easier to group menu items, create non-standard navigation, and attach controls to element areas that would difficult to do normally.
Let’s take a look at how we might use this to connect some controls to a content area:
<img src=”nextbutton.jpg” role=”button” aria-controls=”tutorial” />
<div id=”tutorial”>
Your tutorial's content
</div>
This snippet says that the nextbutton.jpg image is a button, which is a control for the tutorial div below.
Creating “Live” Elements in ARIA
The last feature of ARIA that we’ll cover here is the aria-live attribute. While most of the other features of ARIA here deal with semantic connections, this one deals directly with the idea of giving users notifications of content or element changes.
For many with low vision, it might not be immediately clear that their interaction with your site caused a change elsewhere on the page. This can be especially true for subtle changes, such as small blurbs of text that may change but remain relatively the same length. By using this attribute, every time the content is changed within the defined element, your user will be notified.
We can add this attribute to an element like this:
<div aria-live=”true”>
Content that updates, ie. guided directions
</div>
Making the Web a Better Place for All Users
With a little over 2% of the US population carrying some form of low-vision label, improving the accessibility of your site can increase your site’s reach dramatically. For those with sites reaching multiple countries, that number becomes even larger. On top of accessibility, ARIA also provides a way for non-browser interfaces to utilize your site, with a number of voice-based devices already providing support.
Implementing ARIA helps your users and can help your traffic, so get to it!
Did I miss any details, or do you have additional questions? Leave a comment below!
If you want to dive into the full ARIA documentation or try the official testing tool, check out the links below: