product preview card

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The Alt Tag description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

  • Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a Del element and inside it you will add a Span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

  • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

  Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🍂🦃

  Marked as helpful

  0

  ---

  

  Alex•50

  @alexvdcPosted almost 2 years ago

  @vcarames Thank you for your feedback !

  I had no idea about the "del" tag or the "sr-only" class, I will definitely use them each time I have the opportunity, thanks !

  But for the Alt Tag I have one question... is it really necessary ? I thought for "decorative" image we don't need to put an Alt Tag, this is just a visual help for users.

  0

  

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  @alexvdc

  I am glad that I was able to help you out!

  Every image should have have an alt tag, since that part writing proper HTML code.

  The image in this challenge is not decorative, it is the product being sold. So it definitely needs a proper alt tag . Don't forget not all of your user have 20/20 vision. Some of them will have low to no vision. So having an alt tag will allow screen readers to describe what the product is and looks like.

  https://www.w3.org/WAI/tutorials/images/

  Keep it up!

  0

  

  Alex•50

  @alexvdcPosted almost 2 years ago

  @vcarames

  Oh I see ! I will try not to forget them.

  Thanks for your time and explanations !

  0