- What is an Accessible Name?
- What is an Accessible Description and How is it Different from an Accessible Name?
- Are There Rules that Explain How These Elements are Supposed to Work Together?
- When and How to Use These Strategies
- When to Use ARIA Attributes
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)
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
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:
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
The alt attribute is probably the best known HTML attribute for specifying an accessible name. It is most commonly used with
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="">
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.
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 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.
For instance, the following example is a image that uses both
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.
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.
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 is generally not thought of as an accessible name because many container elements (e.g.
<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
<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.
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.
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.
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>
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
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-describedby) should be limited to interactive elements, such as:
or they are useful with HTML5 elements that are used for structural purposes, such as:
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”>
aria-describedby on these elements works fine, although other commenters indicate that some combinations (e.g.
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.