DEV Community

Discussion on: [SOLVED] How to fully animate the details HTML element with only CSS and no JavaScript

View post

Replies for: But what about a11y? Can we label the content with the appropriate aria like a direct descendant?

Collapse
 
jgustavoas profile image
Gustavo Alexandrino • • Edited

It seems we can use aria-details combined with role="term" and role="definition" like this:

<details>
  <summary>
    <span role="term" aria-details="bezier">Bezier curve</span>
  </summary>
</details>
<div role="definition" id="bezier" class="content">Bezier cruve is a mathematically
 described curve used in computer graphics and animation...</div>
Enter fullscreen mode Exit fullscreen mode

When aria-details is included on an element, assistive technologies inform users of the availability of extended information, enabling the user to navigate to the referenced content.

aria-details allows assistive technology users to visit the associated structured content and provides additional navigation commands, making it easier to understand the structure, or to experience the information in smaller pieces.

When it comes to definition and term roles, the aria-details would be included on the term element with the id of the element with a definition role.

Link to documentation with example

Collapse
 
predaytor profile image
Dmytro Pushkarchuk • • Edited

It would be cool! Do you think in-browser search will open details if the words match?
scottohara.me/blog/2022/09/12/deta... (Special find-in-page behavior)

Thread Thread
 
jgustavoas profile image
Gustavo Alexandrino •

That would be really cool. I tried it, but it didn't work by default.

Besides, it looks that the in-browser search does not actually modify the style of the highlighted text. Otherwise, alternatively, I think we could try a solution using the ::selection CSS pseudo-element in a CSS selector like div.content:has(p::selection).