Native Accordion with Expand-All control

Test your knowledge

What are the two ways you can expose a set of details as a group?

The ARIA `group` role and the ARIA `region` role.

How do you give the group an accessible name?

Using aria-labelledby pointing to a visible or visually-hidden label, or using aria-label if necessary.

What does the name attribute on the deatils element do?

It enforces the rule that only one in a set of details with a matching name value can be open at a time.

What usability perk does the HTML accordion come with?

The contents of the accordion are searchable using the browser’s in-page search functionality.

Do you still need JavaScript to create accordions today?

It depends on the functionality (and usability!) of the accordion you're creating.