Frontend Mentor | Responsive FAQ Accordion Card using flexbox coding challenge solution

@vanzasetia

Posted over 2 years ago

👋 Greetings, Brandon!

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

Accessibility
- All the page content should live inside landmark elements (header, nav, main, and footer). By using them correctly, you can make users of assistive technology navigate the website easily. In this case, you already wrap all of it with main tag,except the attribution, well done 👍. One more thing you can do, you can swap the div with footer for the attribution.

<body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution">
      attribution links goes here...
  </footer>
</body>

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.
Currently all the accordion panels are not accessible with keyboard (Tab and Enter). You can use details and summary tags to make them easily accessible.
I would recommend using rem unit for font size. Using px will not allow the users to control the font size based on their needs.
Styling
- On mobile landscape view (360px * 640px), once the user scroll to see the rest of the content, the background gradient does not fill the entire page. It's becuase you are using height property instead of min-height.
Best Practice
- Remove the commented code. If another developer (it can be you in the future) wants to improve this solution, he/she might get confused about whether or not the commented code should be used or deleted.

That's it! Hopefully, this is helpful!

Marked as helpful

Responsive FAQ Accordion Card using flexbox