aria-details (property)

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.



<img src=”pythagorean.jpg” alt=”Pythagorean Theorem” aria-details=”det”>

<details id=”det”>



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.



The following drawing illustrates an application of the Pythagorean Theorem when used to

construct a skateboard ramp.


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”>


<a href=” Pythagorean.html” id=”det”> Pythagorean</a>


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.


Leave a Reply