ARIA-describedby (property)

ARIA-describedby property is used when the content provided by the HTML tags is not sufficient to explain complete information to the user. For example instructions for a form element, “Read more” as a link description is not sufficient to explain where the link targets to unless the user have some content surrounding. Sometimes the alternate text of the image is not sufficient to explain what the image has to say. In these situations aria-describedby will help in providing the additional information.

Using aria-describedby

Set a reference id to the element from which the content has to be extracted.
<p id=”inst1”>The user name should be at least 8 characters.</p>
In the above example “inst1” is the id of the paragraph where the instruction is placed.
Using aria-describedby, call this content in the target element where you need the additional information with the reference id.
<label for=”uname”>User Name</label>
<input type=”text” id=”uname” aria-describedby=”inst1” />
In the above example aria-describedby receives the information from the paragraph with the reference id and presents it to the user at the form element.

In case the content needs to be extracted from different sources use the procedure with a space between the ids.

The screen reader reads the instruction provided in the paragraph tag above along with the text field. This aria-describedby property can be used along with most of the html elements.

Some scenarios where ARIA-describedby can be used

  • Instructions for form elements.
  • Additional description for links.
  • Additional information for images.

Note: Use the tab key for links and form elements to read out the information provided in the aria-describedby while navigating with NVDA or JAWS.
When aria-describedby is used along with images or any non-focusable elements use screen reader short-cuts such as “G” for images. Using JAWS the content in aria-describedby can be read by using the short-cut command JAWS (insert) key + alt + r to read the descriptive text (works best in Firefox). Safari on IOS also has good support for aria-describedby.