Responsive FAq accordion card html css and js

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Samuel!

  🎉 Congratulations on finishing this challenge! I have some feedback on this solution:

  • Accessibility
    • For the accordion, I would recommend using details and summary elements (accessible by default). If you are planning to keep using button element then I would recommend searching How to make accessible accordion?.
    • The footer element should live outside the main element.
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
  • Styling
    • The h1 is not centered on mobile view.
    • There's too much padding-bottom on the body element.
  • JavaScript
    • I would recommend using const or let instead of var. var is known to have a problem with scooping.
    • Use forEach instead of for loop. By doing that, it will make you write more readable and modern code.
    • For better user experience, I would recommend creating a function that will close the opened accordion every time the user wants to open another accordion. it simply only allows one accordion to be open at a time.
  • Best Practice (Recommended)
    • I would recommend writing the styling using mobile-first approach. It often makes me write less code.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  0