FAQ Accordion Card with Javascript

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @jcombs0929 👋🏻

  I have some quick tips to help fix the accessibility and HTML issues.

  • First, <div class="attribution">...</div> should be <footer class="attribution">...</footer>.
  • Next, in this case 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. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • Also, all the following images should have aria-hidden="true", since they are for decoration only. You can read more about aria-hidden here.

  <img src="./images/illustration-box-desktop.svg" aria-hidden="true" class="img__desktop--box">
  <img src="./images/illustration-woman-online-desktop.svg" aria-hidden="true" class="img__desktop--inner-top">
  <img src="./images/bg-pattern-desktop.svg" aria-hidden="true" class="img__desktop--inner-bottom">
  

  I hope this was helpful 👨🏻‍💻 All in all, you did an excellent job, keep it going. Cheers 👾

  Marked as helpful

  0

  ---

  

  Jeff•80

  @jcombs0929Posted about 3 years ago

  @kens-visuals Thank you very much for the helpful feedback! I will work on implementing those.

  1