Accoridon Pattern, but with <dialog name=""> elements with the new 'exclusive accordion' feature

[lambdaschmied2]

https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/

I was just looking at the accordion pattern example and was wondering, if it wouldn't be better to use the native

/

[1] HTML tags to provide the base functionality.

This could be the basis for an example using the new [2]/[3] "exclusive accordion"-feature. I suppose the accessibility behavior is already present and does not need any additional properties, if this is implemented properly. Therefore, the example could be simplified substantially.
And if some aria-properties still need to be added, I think, this would be an important information for developers as well.

If you are interested, I could create a new draft for the example page, with the details-tag in mind.

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
[2] whatwg/html#9400
[3] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#multiple_named_disclosure_boxes

[JAWS-test]

Please note that this page is not intended to show how elements should be implemented. Of course, HTML is always better than ARIA. The following always applies: https://www.w3.org/TR/using-aria/#rule1

The page is intended to show how certain elements can also be implemented correctly with ARIA, even if this is not recommended. Otherwise the pages on buttons, links, radio buttons etc. would not exist.

Of course, it would make sense if all elements that also work with HTML received a note, as is currently only available for the link: https://www.w3.org/WAI/ARIA/apg/patterns/link/

There is a page for accessible HTML elements without or with as little ARIA as possible: https://www.w3.org/WAI/tutorials/ - your example would be in good hands there!

[JAWS-test]

See: #2905 (comment)

[lambdaschmied2]

Understood, thanks for clearing things up!

Then my suggestion is to add a note, as in the link example, and also point to the 'tutorial' section on the wai-website when it is available. I'll create a new ticket, when there is something to link to.

---

As general feedback: I read a lot on the aria-practices/pattern web pages and never once thought this is only about showing how to properly use the aria properties. To me the "The code [...] not intended for production environments. [...]" warning does not really make clear what the intention of the site is – only what isn't.
I would suggest adding a statement clearing up the intention, like the one you gave me here.

The page is intended to show how certain elements can also be implemented correctly with ARIA, even if this is not recommended.

This would probably be enough. Especially for those who enter the pages directly via search engines, I would make things clearer in my opionion. My train of thought was "it is on the official w3.org website, it must be good and correct" :D

[JAWS-test]

I agree with you. And you're not the first person to have exactly these questions. In this respect, it makes sense to consider how this information can be better communicated