aria-details(property)

Overview

As you are aware of, making the images accessible is the first and foremost principle of the web accessibility. To make the images accessible, there are number of techniques available. HTML alt attribute can be used to make the simple images accessible by providing the short description. Similarly, HTML longdesc attribute can be used to make the complex images(such as graphs, charts, diagrams, and so on..) accessible by providing the detailed description. Of course, There are number of accessibility challenges with longdesc attribute like sighted users cannot understand existence of long description for the image and so on.. but we are not going to discuss them as part of this post. In any case, there is no such equivalent attribute like longdesc in aria till aria1.0

Aria1.1 introduced aria-details(property) and it is kind of the equivalent to HTML longdesc attribute. Aria-details attribute Identifies the element that provides a detailed, extended description for the object. The value of the aria-details is the ID reference of the element. Unlike aria-describedby attribute, assistive technologies do not present the content of the element referenced by aria-details when the object is in the focus. the reason is that The content of the element referenced by aria-details would not passed into accessibility API as accessible name or accessible description and this is how it is constructed. Let us understand how it works. When aria-details is given for an object and that object receives the focus then assistive technologies like screen readers are expected to announce it as so and so object has detailed description. with this announcement, users of assistive technology would understand that there  is detailed description for this particular object and it is kind of awareness for the user. In addition, assistive technologies must provide the mechanism to navigate from the object to the detailed description section as well as mechanism to navigate back from the detailed description section to the object. when assistive technology users navigate to detailed description section then content must be presented with the semantical structure if the content has any semantics.  In contrast, the content of the element referenced by aria-describedby is going to be presented as a string to the assistive technology users without any semantics.

The content of the element referenced by aria-details or detailed or extended description of the object must be visible to all the users. Some authors may think that both aria-describedby and aria-details  are one and the same as both of them are used to provide the image description. Although the purpose is kind of similar, the way the both attributes present to the accessibility API are not the same as explained above. To make it clear, aria-describedby and aria-details are not one and the same and they both serve the different purposes.

The main advantage of the aria-details property over HTML longdesc attribute is that longdesc attribute can be used only for an image element whereas aria-details attribute can be used for all the elements of the base markup.

Author notes

  • Author must ensure The extended or detailed description that is referenced by aria-details is visible for all the users
  • Authors must provide the value of the aria-details as ID reference
  • Authors must reference single element but not the multiple elements as the value of the aria-details

Notes for assistive technology vendors

  • Assistive technologies must provide the
    • mechanism to navigate from the image object to the extended or detailed description section
    • mechanism to navigate back from the extended or detailed description to the image object
  • when both aria-details and aria-describedby are present for an object and user agents do not support
    • aria-details must take the precedence over aria-describedby

Sample code snippet

if given

<img id=”sd” src=”barchart.jpg” aria-details=”bc”>

<details id=”bc”>

<summary>More information about barchart</summary>

<iframe src=”data:bc/html,<body>barchart</body>

</details>

then for the element of id sd expose the aria details relationships on id’s bc and sd

References

Leave a Reply

Your email address will not be published. Required fields are marked *