Open mimarz opened 4 weeks ago
Using https://u-elements.github.io/u-elements/elements/u-details solves screen reader support, is 1:1 compatible with native details/summary, and implements hidden="until-found"
in all browsers that supports this. It is also compatible with, and strongly typed in all major frameworks - even React - as it is building upon the frameworks understanding of native HTML elements ☺️
Accessible Accordions has long been implemented using div, h*, and a button, as per WAI-ARIA guidelines.
One unfortunate side-effect of using the "traditional" implementation of
Accordion
is thatdisplay:none
is often used to hide the collapsed content, which means users can't search for it using the built in browsers search (ctrl+f).This could be remedied using hidden="until-found", but it lacks browser support.
details is often brought up as a semantic html replacement for this approach, however it lacks good screen-reader support.
Using this issue as an investigate-issue to collect information and decided on potential actions thereof.
Notes