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.

 

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.

 

Leave a Reply