aria-details attribute identifies the element (or elements) that provide additional information related to the object.
aria-details attribute can be used to provide additional information or complex descriptions to an object. It is used to inform assistive technology users about the content by providing more in-depth information, whether that content is within the current document or a link to additional assets.
There are other HTML and WAI-ARIA properties that have similar purposes. The HTML
<label> element and the
aria-labelledby properties are used to provide short labels for an object. The HTML
title attribute and the
aria-describedby properties provide for longer plain text descriptions of an object. However, when additional information, complex descriptions, or navigable content related to the object is necessary and available, the
aria-details attribute should be used.
aria-details attribute serves a similar purpose as HTML's never fully-supported
longdesc attribute － a URL of a long description to a replaced element's content － which was deprecated due to lack of support and misuse.
aria-details attribute takes the
id, or space separated list of
ids of the elements to get more detailed information as its values. When
aria-details is included on an element, assistive technologies inform users of the availability of extended information, enabling the user to navigate to the referenced content.
Elements referenced by
aria-details are intended to contain more information than would normally be provided via
The elements referenced by
aria-details should be visible to all users.
aria-details informs users that otherwise might not be able to scan a screen and discern quickly that the explanatory content is available.
aria-details has no impact on the accessible description.
aria-describedby, elements referenced by
aria-details are not used in accessible descriptions and are not turned into a plain string when presented to assistive technology users. If the associated content is not too long and flattening the contents of the referenced element to a simple string of text wouldn't cause loss of information, consider using
aria-describedby instead. That said, it is valid for an element to have both
aria-details and a description specified with either
When it comes to definition and term roles, the
aria-details would be included on the
term element with the
id of the element with a
<p>The <strong>cubic-bezier()<strong> functional notation defines a cubic <span role="term" aria-details="bezier bezImg">Bézier curve</span>. As these curves are continuous, they are often used to smooth down the start and end of the curve and are therefore sometimes called easing functions. </p> <p role="definition" id="bezier">A <strong>Bézier curve</strong>, (Pronounced \ ˈbe-zē-ˌā \) <i aria-description="English pronunciation">BEH-zee-ay</i>) is a mathematically described curve used in computer graphics and animation. The curve is defined by a set of control points with a minimum of two. Web related graphics and animations use Cubic Béziers, which are curves with four control points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub>, and P<sub>3</sub>. </p> <a href="bezierExplanation.html" id="bezImg" aria-label="Explanation of Bézier curve in CSS timing functions"> <img alt="Animated Bézier curve showing 4 control points." src="bezier.gif"> </a>
- ID reference list
idor space separated list of ids of elements that provide or link to additional related information.
Used in ALL roles.
|Accessible Rich Internet Applications (WAI-ARIA) |
- HTML id attribute
- The image
- HTML title attribute