Order Summary

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @iceofice 👋🏻

  I have some suggestions to help you fix couple of accessibility issues and more.

  • In your markup, <div class="card">...</div> should be <main class="card">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issues.
  • For this image <img class="icon" src="images/icon-music.svg" alt="Music Icon" />, I'd remove alt and put aria-hidden="true", since in this case the icon is for decorative purposes. Mainly you should use an alt tag when the image should have some sort of description and is not used for decoration such as this icon or the waves in the background.

  I hope this was helpful, you did a really good job, since it's a small component I cannot say a lot about responsiveness, but it seems responsible enough. Cheers 👾

  Marked as helpful

  2

  ---

  

  Renaldy Prasetio•70

  @iceoficePosted about 3 years ago

  Thank for your feedback @kens-visuals ! As in your first suggestion, what if I don't have any footer? I don't include the attribution part. I never knew about the aria-hidden property. I will implement it on my next project. Cheers ✌️.

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @iceofice oh my bad, sorry I didn't notice that there's no footer. Yeah, if you don't have it, just ignore what I said 😅

  1