Accessible Naming for Screen Reader Compatibility *

An accessible name is the programmatic name that assistive technologies use to identify an element on the page to users. On the web, there are countless instances of elements without an accessible name. This is a significant barrier for assistive technology users. Imagine if a screen reader announced every link on a page as just, “link.” It would be difficult to navigate the site. Users wouldn’t know where any of the links led!

As developers, it is extremely important to understand how to name elements and name them well. Otherwise, assistive technology users will be less able to interact with the page.

Using HTML to Provide an Accessible Name

There are several ways to name elements. The key is that the name must be programmatically associated with the element. Using HTML, this is simple to do. Let’s look at a basic link as our first example.

<a href="https://knowbility.org/">Knowbility</a>

In this case the visible link text “Knowbility” is the accessible name. It needs no further work to make it accessible. Screen readers will announce this as a link to Knowbility.

Some elements are a little more complicated to name. Take this form field for example:

<p>Favorite Animal</p>
<input type="text" name="animal" />

Visually, this field has a name. Many sighted users would understand that the field is asking for a favorite animal. But a screen reader only announces the presence of the field, not what it is for. This is because it doesn’t have an accessible name. Luckily, there’s an HTML solution for this:

• Change the <p> element to a <label> element with a for attribute
• Give the <input> an id attribute with a value that’s unique to the page
• Make the value of the for attribute match the value of the id attribute

Using this solution, the code looks like this:

See the Pen
Correct Label by Knowbility (@Knowbility)
on CodePen.

This solution ensures that screen readers announce the <input> as a field for “Favorite Animal.” When it is programmatically associated, the visible label is also the accessible name.

Let’s go back to our first example: Imagine if a screen reader announced every link on a page as “link.” Why would this happen? Unfortunately, sighted developers are often guilty of relying on visual information alone.

Suppose that instead of creating a link out of text alone, I wanted to use a logo:

See the Pen
Image Link by Knowbility (@Knowbility)
on CodePen.

The alt attribute — the alternative text of the image — is the accessible name of the link. In this case, “Knowbility.”

Many developers, though, don’t include this vital information. They might leave the alt attribute empty or not include it at all. Or they might describe the visual characteristics of the logo and ignore the link destination. In these cases, the screen reader does not have the information it needs to convey the link’s destination to the user. It might announce that there’s an image but give no context for the link. Or it might announce the file name in an attempt to provide some context to the user.

Accessible Naming Beyond HTML

For image links, providing an accessible name is as simple as adding an alt attribute that describes the link destination. But adding an accessible name is not always that straightforward. What if the visual information isn’t presented with an <img> element? SVGs don’t have alt attributes, for example. Neither does content generated with CSS. (Yet.)

Whenever you want to add an accessible name, look to HTML solutions first. But if you are in a situation in which you can’t rely on HTML, there are other solutions, such as visually hiding text with CSS or using ARIA (Accessible Rich Internet Applications).

ARIA should only be used as a last resort, but it can be very useful for explicitly adding accessible names. For example, consider a search button that displays a magnifying glass instead of the word “search.” If the magnifying glass is an SVG, how can you add an accessible name? Here is an example from the Knowbility website:

See the Pen
Search Button with SVG by Knowbility (@Knowbility)
on CodePen.

This example uses aria-label="Search" to provide the accessible name for the button. Sighted users will see a magnifying glass, and screen readers will announce the button as “Search.” This is one way ARIA can provide an accessible name.

Conclusion: Add Accessible Names!

There are many ways to name a user interface element. Which naming method you should use depends on the content. When deciding how to name an element, follow these three steps:

1. Evaluate your content. Are there elements that require accessible names? If so, what should the names be?
2. Ask yourself if each of these elements can be named using native HTML. If yes, use it!
3. If there is no way to name the element using native HTML, consider other options like ARIA.

Whatever the method, it’s important to make sure to name your elements and name them well. Your users depend on it.