Understanding Accessible Names in HTML

#webdev #a11y #html

Accessible names are a key part of ensuring that your web content is accessible to screen reader users. They provide the text that screen readers announce to describe an element, helping users navigate and interact with your content effectively.

This post will explain how accessible names are determined, the order of precedence when multiple naming methods are used, and test your knowledge with real-world examples.

What is an Accessible Name?

An accessible name is a text or label that assistive technologies, like screen readers, announce to describe an element on a webpage. It is a critical part of digital accessibility, enabling users who rely on assistive technologies to understand and interact with web content effectively.

For example:

A button might have an accessible name like "Submit form."
A link might be named "Learn more about our services."

It is best to use visible text as the accessible name. Many elements, including <a>, and <button>, can get their accessible name from their content. For example, given <a href="services.html">Learn more about our services</a> , the accessible name of this link is "Learn more about our services"

Without an accessible name, screen readers may announce generic or unhelpful labels like "button" or "link," leaving users confused.

How Accessible Names are Computed

The accessible name of an element is determined using a specific algorithm called the Accessible Name and Description Computation. This algorithm evaluates different text sources in a defined order of precedence to compute the name.

For elements like buttons and links, the accessible name is computed as follows:

aria-labelledby: References one or more elements whose text content provides the name.
aria-label: Directly defines the accessible name inline.
Element Content: The visible text inside the element itself.
title Attribute: Acts as a fallback when no other naming methods are provided.

For form inputs (e.g., <input>, <textarea>, <select>), the accessible name can also be determined by the associated <label>Elements: Text within a <label> linked to the input is the primary source for the name.

Examples of Accessible Names in Action

A Button with Visible Text:
```
<button>Submit</button>
```
The accessible name is "Submit"
A Button with an Icon and aria-label:
```
<button aria-label="Settings">
  <svg>...</svg>
</button>
```
The accessible name is "Settings"

An Input Field with an Associated <label>:

<label for="search-box">Search</label>
<input id="search-box" type="text">

The accessible name is "Search"

Precedence of Accessible Names

The computation differs slightly for various element types when it comes to determining an element's accessible name, but the general order of precedence is as follows:

aria-labelledby
- References one or more elements whose text content provides the name. This takes the highest precedence across all element types.
aria-label
- Provides an inline label directly on the element.
Associated <label> Element (for form inputs):
- Text content within a <label> associated with a form control (e.g., <input> or <textarea>) is used as the accessible name.
Element Content:
- The visible text inside the element, such as the content of a <button> or <a> tag.
alt Attribute (for <img> Elements):
- Describes the content or purpose of an image.
title Attribute:
- Acts as a fallback and is used only if none of the higher-priority naming methods are provided.

Test Your Knowledge: Accessible Names

Below are examples of HTML elements. For each, try to determine what the accessible name (announced by a screen reader) would be. Then, check your answer!

Element with Text Content and aria-label
```
<button aria-label="Submit form">Submit</button>
```
What do you think the accessible name is?

Answer:
"Submit form"
The aria-label takes precedence over the visible text content.
Element with aria-labelledby and title attribute
```
<span id="tac">I agree to the Terms and Conditions.</span>
<span aria-labelledby="tac" title="Agree"></span>
```
What do you think the accessible name is?

Answer:
"I agree to the Terms and Conditions."
The aria-labelledby attribute takes precedence, so the title attribute is ignored.
Button with aria-labelledby and aria-label
```
<div id="label2">Profile Settings</div>
<button aria-labelledby="label2" aria-label="Settings"></button>
```
What do you think the accessible name is?

Answer
"Profile Settings"
The aria-labelledby takes precedence over the aria-label.

How did you do?

Understanding how accessible names are determined is essential for creating web content that is usable for everyone. By following the rules of accessible naming and testing your work, you can ensure a better experience for assistive technology users.

Key Takeaways

Accessible names are essential for improving usability for screen reader users.
All controls elements (e.g buttons, links) should have an accessible name
Use attributes like aria-labelledby sparingly as it has the highest order of precedence and calculating the name of an element with aria-labelledby can be complex and reference hidden content as well
Make sure to test with screen readers to be sure what gets announced to the user.