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

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 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!

  Marked as helpful

  1
• 

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  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

  Marked as helpful

  1

  ---

  

  Doc•100

  @GodILoveTequilaPosted almost 3 years ago

  @byronbyron I haven't dig into JS yet, but i will definitely check it out. Thanks a lot!

  0