Accessible Names and Descriptions

Contents

What is an Accessible Name?

Images, UI controls, and other content on a web page that is not explicitly ASCII text needs an “accessible name” in order for screen readers and other assistive technologies to let users understand the content. Here, “accessible name” is a term of art and has nothing to do with the name attribute. There are several attributes and properties for creating an accessible name, including:

  • alt (images)
  • value (form fields)
  • label (form fields)
  • innerHTML (for container elements)
  • aria-labelledby
  • aria-label

There is a hierarchy to these elements– such as using aria-label can often override other ways of creating an accessible name. Also, some of them can be extended. For instance, you can “string together” several elements using aria-labelledby.

What is an Accessible Description and How is it Different from an Accessible Name?

Sometimes, a picture is worth a thousand words– and just giving something a short “accessible name” may not adequately describe non-text content (like images and form elements). This added description is called an “accessible description”.

Historically, one way to provide an accessible description is using the longdesc attribute, but this has obtained limited uptake by browsers and screen readers. Two commonly supported strategies for an accessible description is to use one of the following comment attributes:

  • aria-describedby
  • title

In general, you shouldn’t use an accessible description without an accessible name. Remember, an accessible description is really supplementary information.

Are There Rules that Explain How These Elements are Supposed to Work Together?

The W3C has created Accessible Name and Description Computation 1.2 in 2019 that describes the way that these elements are supposed to work together. Unfortunately, browsers and screen readers are hardly consistent in how well that these elements actually work together. For instance, few browsers enable the accessible description to be optionally available– instead, they just place accessible descriptions as part of the end of the accessible name.

When and How to Use These Strategies

ALT

The alt attribute is probably the best known HTML attribute for specifying an accessible name. It is most commonly used with <img> and <area> elements.

Examples

The following example is an image of the logo. When the screen reader hits this image, it will read, “logo for XYZ Corporation” to the user.

<img src="logo.png" alt="logo for XYZ Corporation">

The following example illustrates how to provide an empty (null) alt attribute for a decorative image.

<img src="fleurdelis.png" alt="">

ARIA-DESCRIBEDBY

The aria-describedby attribute lots you create an accessible description by stringing together one or more ID attributes. Each of the referenced ID’s can be placed anywhere on the page and will be concatenated in the order in which they appear.

Examples

For instance, the following code gives the logo an accessible name of “Converge Accessibility” and an accessible description of “The best in accessibility consulting”

<img src="logo.png" alt="Converge Accessibility" aria-describedby="d1 d2">
...
<p id="d1">The best</p>
...
<p id="d2">in accessibility consulting</p>

ARIA-LABEL

Using aria-label provides an accessible name and is commonly used with elements that cannot accept alt. In general, it does this in a very brute force manner– replacing or overriding other means of providing an accessible name.

Examples

For instance, the following example is a image that uses both alt and aria-label and will be read as “The Mona Lisa by Leonardo Da Vinci”

<img src="mona_lisa.png" alt="Da Vinci's most famous painting" aria-label="The Mona Lisa by Leonardo Da Vinci">

Note that, while aria-label is often used where alt is not accepted, this doesn’t mean that aria-label cannot be used where alt is accepted.

ARIA-LABELLEDBY

Using aria-labelledby is not dissimilar from using aria-describedby because it lets you string together various portions of text using ID attributes. The difference between the two is simply that aria-labelledby creates an accessible name while aria-describedby creates an accessible description. In the current implementation of browsers and screen reader technologies, this generally reduces to a difference in ordering– the accessible name is read first and the accessible description is read second.

Examples

For instance, the following code combines aria-labelledby and aria-describedby with the effect that the button will be read as “Press this button in case of emergency.” Of course, what follows afterwards is the Yoda version (“of emergency in case button this press”) 😉

<button aria-labelledby="id3 id4" aria-describedby="id1 id2">
<img src="button.jpg" alt="" />
</button>
...
<p id="id2">of emergency</p>
<p id="id1">in case</p>

<p id="id4">button</p>
<p id="id3">Press this</p>

innerHTML

innerHTML is generally not thought of as an accessible name because many container elements (e.g. <p>, <div>, etc) are not commonly thought of as having a name. But, in fact, these basic container elements most certainly DO have an accessible name– specifically, the name of their contents. This can be extracted or manipulated by using the CSS innerHTML property.

LABEL

The <label> element is one obvious means for providing an accessible name to a form element. In addition to making form elements accessible to screen reader users, using the <label> element also facilitates access for users with dexterity and mobility limitations because it enables focus to be moved to a form element by clicking on the label text.

Examples

There are two ways to use a <label> element to give a form element an name. In both of the following examples, a text field is given the accessible name of “last name”.

<label for="l_name">Last Name</label>
<input type="text" id="l_name">
...
<label>Last Name
<input type="text">
</label>

In the first example, the id attribute explicitly associates the form element and its label text. In the second example, the association is implicit. While the code is obviously shorter in the second example, it assumes that the label text and associated form field are directly adjacent to each other in the Document Object Model.

TITLE

The title attribute can be used on many HTML elements to provide an accessible name. It is commonly used on anchor elements to provide an accessible name that supplements the name of the link text. Also, using the title attribute commonly creates a tooltip on many browsers– by hovering the mouse over an element with a title attribute, the text of the tooltip appears.

Examples

In the following example, a link to a shareholder report includes a title attribute that advises the screen reader (and tooltip reader) that following the link will download the pdf of the report.

<p>In 2020 Q4, Varlamabo Corporation saw a record growth that was described in its <a href="http://www.varlamabo.com/2020_report.pdf" title="download PDF">2020 Shareholder Report</a></p>

VALUE

The value attribute is commonly used with HTML <input> buttons to provide the visual text of the button. However, in addition to establishing the visual text, it also creates the accessible name of the input element. It can be used with

  • <input type="button>
  • <input type="image>
  • <input type="reset>
  • <input type="submit>

Examples

For instance, the following code changes the submit button to have both the accessible name and displayed text of “submit now”

<input type="submit" value="submit now">

When to Use ARIA Attributes

As useful as the various ARIA attributes are as alternatives to the more limited HTML attributes, they shouldn’t be used everywhere ideally. For instance, the three ARIA attributes (aria-label, aria-labelledby, and aria-describedby) should be limited to interactive elements, such as:

  • <a>
  • <audio>
  • <video>
  • <input>
  • <select>
  • <button>
  • <textarea>

or they are useful with HTML5 elements that are used for structural purposes, such as:

  • <header>
  • <footer>
  • <main>
  • <nav>
  • <aside>
  • <section>
  • <form>

or when using ARIA landmark roles to accomplish the same task (e.g. <div role=”nav”>). In addition, you can also apply these ARIA attributes for ARIA widget roles, such as

  • <div role=”dialog”>
  • <div role=”progressbar”>
  • <div role=”silder”>
  • <div role=”switch”>
  • <div role=”tab”>
  • <div role=”tabpane”>

Supposedly, using aria-label, aria-labelledby, and aria-describedby on these elements works fine, although other commenters indicate that some combinations (e.g. <video> with aria-label may cause problems). And to further confuse the issue, some W3C Techniques (like ARIA15: Using aria-describedby to provide descriptions of images) specifically use the aria-describedby attribute with an <img> element, which is not on the list above.

The bottom line: be sure to test your code when using any of these ARIA attributes.