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.
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.
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.
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.
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:
<li>tag for a series of checkboxes that you prefer not to be composed of form elements.
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.
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="#" /> <!-- adding alternative labeling to an image (with visible text) --> <img aria-labelledby="image-text-desc" src="#" /> <div id="image-text-desc">A text description of the image, visible on the screen</div>
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.
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” />
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.
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
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>
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: