Skip to main content
Practical Accessibility Homepage
Practical Accessibility
with Sara Soueidan
Navigation
Custom Accordion
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.