WAI-ARIA: aria-describedby (Property)

Description
Identifies the element (or elements) that describes the object. See related aria-labelledby.
The aria-labelledby attribute is similar to the aria-describedby in that both reference other elements to calculate a text alternative, but a label should be concise, where a description is intended to provide more verbose information.
The element or elements referenced by the aria-describedby comprise the entire description. Include ID references to multiple elements if necessary, or enclose a set of elements (e.g., paragraphs) with the element referenced by the ID.
aria- describedby Example
HTML Example 1
<div class="text">
<label for="first">First Name:</label> <input type="text" id="first" name="first" onfocus="tooltipShow(tooltip1)" onblur="tooltipHide(tooltip1)" onmouseover="tooltipShow(tooltip1)" onmouseout="tooltipHide(tooltip1)" aria-describedby="tp1">
<div id="tp1" class="tooltip" role="tooltip">
Your first name is optional
</div>
</div>
HTML Example 2
<img src="/foo" alt="abbreviated name" aria-describedby="prose1"><div id="prose1">This prose in this div describes in detail the image foo.</div>
Characteristics
Related Concepts
- Label in HTML [xhtml11]
- online help
- HTML table cell headers
Used in Roles
- All elements of the base markup
Value
- ID reference list
- A list of one or more ID references.
Semantic HTML
No HTML element equivalent.
Reference
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on aria-describedby. - HTML5 Accessibility Chops: notes on using ARIA by TPGi