CODEWITHSUNDEEP
htmlaccessibility
bronzehedwick
bronzehedwick

Reputation: 3013

Adding aria attributes to details elements

When using the <details> and <summary> elements, do you need to add any aria attributes for accessibility? Or, put another way, would adding any aria attributes enhance the element's accessibility in some way? I'm thinking aria-expanded, aria-pressed, aria-role, etc.

I know details is a semantic element, but I'm wondering if there's any real benefit to adding them, or if they're at best redundant.

Thanks.

Upvotes: 1

Views: 1682

Answers (2)

Adam
Adam

Reputation: 18855

According to the ARIA in HTML specs, the details element has an implicit role of group

The group role is defined as "Name from author" in ARIA specs so it does require a summary element OR an aria-label attribute OR an aria-labelledby attribute.

<!-- simple use case with a summary -->
<details>
    <summary>View more details</summary>
    ...
</details>

<!-- This can be used with an empty summary if you just want the icon visually -->
<details aria-label="Details">
    <summary></summary>
    ...
</details>

<!-- or you can reference another element(s) -->
<div class="display: none" id="detailsfor">Details for</div>
<div id="myproduct">My product</div>
<details aria-describedby="detailsfor myproduct">
   ...
</details>

As long as you are using the native HTML elements (details and summary) you do not want to wonder about adding any other ARIA attribute

Upvotes: 2

Ususipse
Ususipse

Reputation: 321

In a few cases where the tag does not have the expected information, such as using a checkbox to force CSS states then there is a requirement to use the aria-labelledby attribute in particular to pass AA success criterion.

This falls under WCAG 2.1 Chapter 3.1.2 - Language of Parts

There is an interesting Wiki about Using ARIA to Provide for Hidden Labels

If you do have the expected information in your details or summary then the screen reader will gain no benefit from reading that info twice.

Upvotes: 0

Related Questions