Order Summary Component - HTML CSS

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @seilreven 👋🏻

  I have some suggestions to help you fix the accessibility issues and some other things.

  • In your markup, <section class="summary">...</section> should be <main class="summary">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>.
  • Next, I suggest using <h2> or <p> instead of <h3>, because headings in HTML have to increase gradually, such as h1, h2, h3…. These will fix the accessibility issues. Only, don't forget to generate a new repot once you fix the issues.
  • Also, the music icon, should have aria-hidden="true”, because it's for decoration only. You can read more about aria-hidden here. Like so:

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

  • Lastly, I suggest implementing :hover state, which you can find in design folder active-state image, after you implement it you can also add transition: all 0.2s; to the button and the links, this will make :hover smoother.

  I hope this was helpful 👨🏻‍💻 other than that, you did a really nice job for the first project. Cheers 👾

  Marked as helpful

  1

  ---

  

  L.•110

  @seilrevenPosted about 3 years ago

  @kens-visuals Thank you so much for the suggestions and encouragement! I will try to keep them in mind.

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @seilreven no problem 😇

  0