The Accessibility Developer Guide already references the WAI-ARIA Authoring Practices for accordions:
https://www.accessibility-developer-guide.com/examples/widgets/accordion/
However, the example
https://www.accessibility-developer-guide.com/examples/widgets/accordion/_examples/accordion-with-radio-buttons/
is still presented as a fully valid implementation.
Using radio buttons to implement accordion behaviour is now considered an outdated pattern, as it repurposes form controls for a non-form interaction and can be confusing for assistive technology users.
The current WAI-ARIA Authoring Practices Guide provides an up-to-date accordion pattern using buttons with appropriate ARIA attributes (aria-expanded, aria-controls):
https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/
Because ADG examples are often accessed directly via deep links, the radio button example may give the impression that this approach is still recommended.
Suggestion:
• Clearly mark the radio button accordion example as legacy / historical, or
• Move it to an anti-pattern or “why not to do this anymore” section, or
• Replace it with the current WAI-ARIA APG accordion example.
This would help avoid mixed signals and better reflect current accessibility best practices.
@backflip @rudigier Thanks for updating this.
The Accessibility Developer Guide already references the WAI-ARIA Authoring Practices for accordions:
https://www.accessibility-developer-guide.com/examples/widgets/accordion/
However, the example
https://www.accessibility-developer-guide.com/examples/widgets/accordion/_examples/accordion-with-radio-buttons/
is still presented as a fully valid implementation.
Using radio buttons to implement accordion behaviour is now considered an outdated pattern, as it repurposes form controls for a non-form interaction and can be confusing for assistive technology users.
The current WAI-ARIA Authoring Practices Guide provides an up-to-date accordion pattern using buttons with appropriate ARIA attributes (aria-expanded, aria-controls):
https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/
Because ADG examples are often accessed directly via deep links, the radio button example may give the impression that this approach is still recommended.
Suggestion:
• Clearly mark the radio button accordion example as legacy / historical, or
• Move it to an anti-pattern or “why not to do this anymore” section, or
• Replace it with the current WAI-ARIA APG accordion example.
This would help avoid mixed signals and better reflect current accessibility best practices.
@backflip @rudigier Thanks for updating this.