Aria-details property identifies the element that provides a detailed explanation of an object. It is an ARIA 1.1 property.
When an image or a similar element needs a detailed explanation, something more than what aria-describedby can provide aria-details can be used. The detailed explanation can be a container of text on the same page or a link that takes the user to a different page. The content that is referred by aria-details should be always visible.
aria-details property just informs the existence of a detailed explanation of the object to the user. It does not convert the content available in the referenced location and read out by screen reader similar to what aria-describedby does. Since the content provided in the reference of aria-details is lengthy it might not be easy for the user to consume the entire content. They may also loose the meaning or intent of some content.
aria-details property uses id value of the container for referencing the content.
Aria-details and aria-describedby properties can be used for same element in certain situations. however, if the user agents only respects one attribute when more than one references the same element then aria-details property takes the priority.
Example
<img src=”pythagorean.jpg” alt=”Pythagorean Theorem” aria-details=”det”>
<details id=”det”>
<summary>Example</summary>
<p>
The Pythagorean Theorem is a relationship in Euclidean Geometry between the three sides of
a right triangle, where the square of the hypotenuse is the sum of the squares of the two
opposing sides.
</p>
<p>
The following drawing illustrates an application of the Pythagorean Theorem when used to
construct a skateboard ramp.
</p>
Alternately the detailed explanation can be in a different page linked and referenced as follows.
<img src=”pythagorean.jpg” alt=”Pythagorean Theorem” aria-details=”det”>
<p>
<a href=†Pythagorean.html†id=â€detâ€> Pythagorean</a>
</p>
Aria-details property used in roles
Can be used in any element of the base markup.
Values of Aria-details property
Uses a single id reference as the value.