Responsive FAQ using flexbox and JS

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  👋 Hi Zach!

  I have some feedback on this solution:

  • Accessibility
    • Use the native HTML tag to create the accordion, details and summary. This will make the assistive technology like screen-reader can understand that it is an accordion.
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technology such as screen readers ignore those images. In this case, all images are decorative only.
    • Swap the attribution div with footer to fix the accessibility issue.
  • Visual
    • To make this website responsive:
      • I would recommend letting the content inside the container control the height of the container.
      • Simplify the @media query, in this case, you don't need to care about the user height size. Focus on the width (min-width, with mobile-first approach).
    • The background-color of the container or the card should be white, which means you don't need any filter property at all.
  • JavaScript
    • Don't use inline styling ( the same rule apply when writing JavaScript ). Use CSS classes to handle any styling and use JavaScript to add or remove the class.
    • I would recommend using forEach instead of for loop to make your JavaScript easier to understand.
    • I would recommend separating the classes for styling and for JavaScript by prefixing the class name with js-. The js- classes are only for JavaScript purposes only ( no styling at all). This will make it easier to maintain, since if you want to change the styling, then the functionality will still remain.

  That's it! Hopefully, this is helpful!

  11