FAQ accordion card: BEM, Vanilla JS, SASS

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  This looks and functions really nice on mobile, well done!

  It's mostly accessible, but I think could be enhanced with some aria attributes to link the faq question and answer, or alternatively, if you wrapped your accordion buttons in a heading tag that would make it fully accessible very easily.

  Don't think you need the accordion separators as divs in the html - pop them in pseudo elements or just use padding and borders for the same effect.

  That's all from me. Very very nice work though!

  2

  ---

  

  Jessica Strachan•160

  @JessicaStrachanPosted almost 4 years ago

  @grace-snow I've done countless accordions on sites but haven't considered the use of aria attributes!

  Initially I made the separators as borders on the button, which then separated the question from the text, so I changed to divs. This problem would be solved if I wrapped my accordion buttons and content though.

  Thanks for your feedback :)

  1

  

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  @JessicaStrachan yeah I'd probably put the questions in an unordered list and wrap each question+answer in a list item that could have border-bottom on it.

  Again, nice work though

  1