product-preview-card-component-main

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

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

  • To better identify the main content of you site you will want to encase your entire component inside a Main Element.

  • 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.

  • This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:

  https://www.w3schools.com/html/html_images_picture.asp

  https://web.dev/learn/design/picture-element/

  • The name of the perfume , “Gabrielle Essence Eau De Parfum” is the most important content in your card so it should be wrapped in a Heading Element.

  • The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include a sr-only text explaining that this is the old price.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  Amr Shamy•30

  @ShaaamyPosted about 2 years ago

  @vcarames okay thanks for ur advices <3

  0

  

  Amr Shamy•30

  @ShaaamyPosted about 2 years ago

  @vcarames I didn't get the problem in the old price..

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @Shaaamy

  For people that use screen readers (have low to no vision) are not able to differentiate which price is which. All they hear is two different prices.

  Since you and I can see the line through the price we can tell thats the old price. But screen readers cannot tell that there is a line through. So by including an "sr-only-text" that states something like" this was the old price" screen reader users will be able to know what price is what.

  Marked as helpful

  0

  

  Amr Shamy•30

  @ShaaamyPosted about 2 years ago

  @vcarames Oh i get it..thankss<3

  0