Order Summary Component - Using Flex Box

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @AbhijitSarode 👋🏻

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

  • In your markup, <div class="card">...</div> 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.
  • The hero image should have a description in the alt tag, something like, alt="happily dancing girl"
  • For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
  • If srcset attribute is not used, it should be removed, otherwise it causes some errors. So the image tag should look something like this:

  <img src="/images/icon-music.svg" alt="" aria-hidden="true">
  

  • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.
  • Hero image should have a display: block;, it removes the line underneath the image. If you want to know what's causing it, check out the 3rd section of this video.
  • I won't go into details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.
  • Next, I suggest using <h2> or <p> instead of <h4>, because headings in HTML have to increase gradually, such as h1, h2, h3…..
  • li is only allowed in ul as a list item, so you should remove it from <a> tag.

  I hope this was helpful 👨🏻‍💻 all in all, for the second project, you did a good job. Cheers 👾

  Marked as helpful

  1

  ---

  

  Abhijit Sarode•90

  @AbhijitSarodePosted about 3 years ago

  @kens-visuals Your feedback is a huge help, I will definitely put it in action right away. Thanks a lot Ken🙏

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @AbhijitSarode no problem, glad to be helpful 😇 I'd really appreciate if you could mark the comment as helpful 🙃

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  @kens-visuals The dancing girl image is only a decorative image, since it has nothing to do with the order summary and without it, the user still understands the content of the page. The image also doesn't contain or add any useful information for the users, so it is purely a decorative image.

  So @AbhijitSarode, I would recommend leaving the alt="" empty and adding aria-hidden="true" to make all screen readers ignore that image.

  Marked as helpful

  0

  

  Abhijit Sarode•90

  @AbhijitSarodePosted about 3 years ago

  @kens-visuals Happily done🤟

  1

  

  Abhijit Sarode•90

  @AbhijitSarodePosted about 3 years ago

  @vanzasetia Never thought how much thinking goes into implementing an element. I'll definitely look into it.

  Thanks a lot @vanzasetia & @kens-visuals for widening my gaze. I am very much appreciative to both of you for taking your time and helping me in my journey🙏

  0