Web ADA: What is an Aria Label?

If you’re wondering about web accessibility, then you’re in the right place. You might be aware of the Americans with Disabilities Act (ADA), but what does this have to do with your website? The scope of the ADA actually requires all websites owned by U.S. organizations and/or used by U.S. citizens to be in compliance with the Web Content Accessibility Guidelines (WCAG). Hence, if your website is WCAG compliant, then it is ADA compliant.

It is definitely important for your website to comply with the WCAG to avoid a lawsuit, but equally as important to be accessible to people with disabilities. According to the CDC, more than 1 in 4 adults in the United States have some type of disability. These disabilities can range from reduced motor function to visual impairment.

Due to certain disabilities, a user may require assistive technologies to navigate a web page and interpret content. An example of assistive technology would be screen readers; this type of software converts text to audio or braille. So how do we ensure that our web content is accessible to screen reading technology?

What is an ARIA Label?

Aria labels are one of the answers to achieving compliance with Guideline 1.1 of the WCAG 2.2 Guidelines. This guideline states that text alternatives should be provided for any non-text content so that it can be changed into other forms that people of disabilities may need. These forms of content include large print, braille, speech,symbols, or simpler language.

In other words, aria labels are visually-hidden labels that are only interpreted by assistive technologies. Much like alternative text for images, aria labels can be used for any HTML element whose purpose or function cannot be immediately determined out of context.

When and How to Use an ARIA Label

ARIA labels can be used on any element that a user can interact with in some way, whether it be a link, button, navigation item, image, etc. As long as each element has an accurate text description, or a label identifying the object’s purpose, it is in compliance.

Let’s take a look at an example of when to use an ARIA label. Below, we see four icons that link to their respective social media websites. Visually, we’re able to tell what website the link is by checking the icon. However, let’s consider this from a different perspective.

From the perspective of a keyboard or screen reader user, they may not be able to tell where the icon links leads. Screen reading technology scans the HTML of the page and outputs that to the user. Links, for instance, appear in the HTML as a <a> tag. Since there is no text inside the link, the <a> tag is called out to the user as a ‘link’. Thus, the function or purpose of the link is not presented to the user.

To make this accessible, we have a couple options. First, we can add text inside the link, adjacent to the icon image. From a design perspective, this option may not always be ideal. This is where the ARIA label comes in; we can use the aria-label attribute on the <a> tag like so:

Since the ARIA label can only be interpreted by screen reading technology, it will not disrupt the flow of content or original design of the page. Make sure to keep the label as succinct as possible to provide an accurate description for the link. While ARIA labels may seem like a small step, it’s essential to achieving full ADA compliance.