FAQ ACCORDION CARD with Flexbox, Javascript

Community feedback

• 

  P

  Ken•4,915

  @kens-visuals

  Posted over 3 years ago

  Hey @lmaoken 👋🏻 it's Ken 😅

  I've got some suggestions to help you fix the accessibility and HTML issues.

  • In your markup, <section class="card">...</section> should be <main class="card">...</main>. This will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • Instead of <section>, I suggest using regular <div> for a couple of reasons. First, when you use a <section> you have to have a heading, like h1-h6. Next, <section> is for bigger parts of layout, such as, contact us about us, image gallery, etc.
  • Also, the following to images should have aria-hidden="true" like so:

  <img src="images/illustration-woman-online-desktop.svg" aria-hidden="true">
  <img src="images/illustration-box-desktop.svg" aria-hidden="true">
  

  because they are for decorative purposes only. You can read more about aria-hidden here.

  I hope this was helpful 👨🏻‍💻 you did a superb job, especially with responsiveness. Well done, keep it up. Cheers 👾

  26

  Marked as helpful
• 

  Ken•935

  @kenreibman

  Posted over 3 years ago

  LIVE VERSION IS UPDATED TO HAVE BETTER VISUALS AND IMPROVED SIZING. -- If I ever get PRO I'll update the screenshot.

  00