This article explores various methods that can generate accessible descriptions for elements.
What is an accessible description?
Accessible descriptions are additional information given to elements in the accessibility tree. Unlike accessible names, which are generally preferred to be concise, descriptions can provide more verbose information.
Accessible descriptions can be computed from one or more sources and made available in the accessibility tree as a single text string.
So, what are the different methods that can be used to generate an accessible description?
Method 1: Using the title attribute
The contents of the title can generate an accessible decscription for many elements, as long as the title is not used for the accessible name:
<label for="a1">Name</label>
<input id="a1" type="text" title="Add your full name">Method 2: Using the aria-describedby attribute
The contents of one or more elements can generate an accessible description for another element - if there are matching aria-desscribedby and id values:
<label for="a2">Name</label>
<span id="b2">Add your full name</span>
<input id="a2" type="text" aria-describedby="b2">If more than one element is referenced, their id values are processed in the order they occur within the aria-describedby value. The accessible description for the input below would be: "Add your full name Error: This field must be filled in".
<label for="a3">Name</label>
<span id="b3">Add your full name</span>
<input id="a3" type="text" aria-describedby="b3 c3">
<span id="c3">Error: This field must be filled in</span>Method 3: Using the aria-description attribute
This attribute is still in early discussion, and may be released as part of ARIA 1.3. In theory, the contents of the aria-description would generate an accessible description for an element:
<label for="a3">Name</label>
<input id="a3" type="text" aria-description="Add full name">When this method becomes available, it should be used with care as it is only available to technologies that support the accessibility tree. Ideally, any supportive information should be provided on-screen for all users.
Which accessible description wins?
What happens if there is more than one possible description for an element? Which one becomes the text string that creates the accessible description in the accessibility tree?
The two key documents that define accessible names and descriptions are:
In simple terms, accessible descriptions are defined in the following order:
- If present, use
aria-describedby. - Otherwise, if present, use
title. - Otherwise, there is no accessible description.