faq-accordion-card-challenge-hub html&css

👋 Hi Doc!

I never think about using radio button to create the accordion 😅. This method makes it possible to create the open and close accordion and close the accordion when the user opens another accordion. In my opinion, this is a unique and creative solution to create the accordion.

But, this is not accessible meaning that:

• The screen reader doesn't pronounce whether the accordion is collapsed or expanded.
• Can't interact with the accordion using keyboard, Tab to navigate and Enter to expand or collapse the accordion
• The collapsed content still visible to screen reader

So, to fix this problem, you could use the native HTML tag, details and summary (no need for JavaScript). But, keep in mind that the non-javascript is an additional challenge. I would recommend trying to do this challenge in the future using JavaScript.

That's it! Hopefully, this is helpful!

Nice 100% CSS collapse! 😄

If you want to be really really super accessible, have you tried using aria attributes like aria-expanded and aria-controls with Javascript?

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

https://getbootstrap.com/docs/5.1/components/accordion/#example