Question: Accordion Implementation vs using <details> > <summary>

[StfBauer]

One question on the accordion implementation.
https://www.w3.org/WAI/ARIA/apg/example-index/accordion/accordion.html

I totally understand the implementation but why doesn't it use <details> <summary>

Would not this accomplish the same accordion just without any javascript involved and would just work with HTML only.

I wonder what the downsides are and is the shown implementation just in a way to work with old browser?

Thank you in advance.

[JAWS-test]

Many patterns shown here will work without ARIA. And they should be implemented in a perfect world without ARIA (https://www.w3.org/TR/using-aria/#rule1). Unfortunately, we don't live in a perfect world and many web developers don't like HTML or don't like the visual limitations of HTML (some elements can't be fully styled with CSS). That's why the patterns show ways to implement things with ARIA, but which are usually better implemented with HTML. It would make sense to mark with each example whether the respective pattern also works with HTML or not. To my knowledge, this has also been discussed here before, but unfortunately not yet implemented. But we already have the warning at the top of the page (which by the way uses <details> and <summary>):

Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

[StfBauer]

Thank you @JAWS-test - I have assumed so.

[mcking65]

It is easy to make a disclosure with details/summary. The primary difference between the accordion and disclosure patterns is the accordion pattern includes headings. It is not possible to implement headings with details/summary.

If this, in combination with the information from JAWS-Test does not answer your question fully, please feel free to re-open the issue.

[StfBauer]

Thanx @mcking65

The accordion pattern includes headings.

One last question. can't I include headings in the summary?

[JAWS-test]

can't I include headings in the summary?

According to the HTML specification, just about anything can be in a summary: Headings, links, videos etc.
But: Many browsers treat the summary element like a button (which makes sense in itself) and a button has implicit role=presentation for all children, which means that all child elements have no role. If a heading or link has no role, its semantics will not be output by the screen reader. In practice, some screen readers output the roles anyway, others do not. Thus, a summary should currently contain only text and nothing else.

See: w3c/html-aam#345 and FreedomScientific/standards-support#591