Order summary component using HTML + CSS

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @yohannesburp 👋🏻

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

  • Your card should be wrapped in <main> tag, like the following:

  <main>
      <img src="./images/illustration-hero.svg" alt="a happy human enjoying music" class="card_top" role="figure">
      <section class="card_bottom">...</section>
  </main>
  

  This will fix the accessibility issues, don't forget to generate a new repot once you fix the issues.

  • For the music icon, add aria-hidden="true”, because it's for decoration. So, like this <img src="./images/icon-music.svg" aria-hidden="true” class="cardH_img">. You can read more about aria-hidden here.
  • 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, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

  I hope this was helpful 👨🏻‍💻 For the first project, you did a superb job, keep it up. Cheers 👾

  Marked as helpful

  2

  ---

  

  Jp•40

  @yohannesburpPosted about 3 years ago

  No worries, @kens-visuals. This helped me a lot. Thanks and cheers, too.

  0