FAQ accordion solved using HTML and SCSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi there!

  I have some feedback on this solution:

  • Accessibility
    • Currently I can't navigate this website using keyboard since there is no :focus-visible styling. I would recommend creating a custom :focus-visible style for any interactive element.
    • The animation is great, but I would recommend adding the animation only for people that prefer to see it. Try to search about CSS @media (prefers-reduced-motion).
    • 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.
  • Other
    • Since this is a JavaScript challenge, I would recommend trying to add a functionality where every time the user wants to open another accordion then the opened one will be closed automatically. In my opinion, it can create a better user experience.
    • I would recommend leaving a non-minified CSS file so that everyone can review your stylesheet easily. Since right now, I have to open one by one the Sass files.

  That's it! Hopefully, this is helpful!

  0

  ---

  

  iamcerebrocerberus•290

  @iamcerebrocerberusPosted almost 3 years ago

  @vanzasetia thank you sir... I will consider your suggestions...but one thing, there is a prefers-reduced-motion query for those who prefer not to see the animations

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @iamcerebrocerberus You're welcome! Are you trying to ask a question about the @media (prefers-reduced-motion) ?

  0