FAQ accordion card

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 3 years ago

  Hello

  On mobile for me the questions and answers are overlapping each other making them unreadable. I think this is because you've given the buttons an explicit height rather than min height or just using padding too and bottom on them, so should be easy to fix.

  More important than that though is the foundational html lessons in this challenge.

  • headers are meaningful landmark elements, they cannot be blank and you can only have one per page
  • instead, background images could be on divs or pseudo elements
  • well done for using buttons for the accordion triggers. These also need to have the aria-expanded attribute which toggles between false and true depending on whether the accordion is open
  • the down arrows are not meaningful/important images and create unnecessary repetition for screenreader users . They should have empty alt attributes (aria-hidden or role presentation would also hide them)

  I hope this helps you. Good luck

  01

  Marked as helpful