[en] Disclosure (Show/Hide) Pattern - Idea around semantic equivalents

Given one of the main rules of ARIA is not to use ARIA unless you need to:
when landing on a patterns page, it would make sense if there were a
reference to the semantic equivalents for patterns that have them.
Encouragement to use the semantic equivalents and only add ARIA as needed
for browser/screen reader support would also make sense.

An example, the Disclosure (show/hide) pattern
<https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/> could reference
details/summary elements. This doesn't necessarily mean the details/summary
pattern should be documented in the APG. There are other resources that
will do that (and I'm sure you don't want to track things like browser or
screen reader support).

But just linking to the HTML spec, MDN, or any other respectable resource
would be very helpful to new learners. They are unlikely to dig through the
full spec and find these, so they may not use semantic elements when
possible. If you really wanted to close the loop, you could add links to
things like https://a11ysupport.io.

Could even be a boilerplate banner like:

Consider the semantic alternative for this pattern, [element names].
> Consult these resources for implementation details:
> * [HTML Spec link]
> * [MDN link]
> Be sure to check the latest screen reader support results at
> a11ysupport.io


Thanks for your consideration,

Harmony Hames

Received on Friday, 10 March 2023 09:25:02 UTC