Product Card Preview

Community feedback

• 

  KapteynUniverse•2,150

  @KapteynUniversePosted about 16 hours ago

  Hey Sephirah, nice job.

  You can use picture tag for the different images on different screen sizes.

  H1 for the heading text is ok but this component is for to use in a web page and every page should only have one h1. This is a simple card, it would never be used to serve the main heading on a page, so h2 or h3 might be better too.

  I am not sure about landmarks too. I would just wrap the card div with main, change the header and main to just a div and also change card div into a article tag

  Since you added aria-hidden on the icon, you can use a sr-only explaining texts for situations like here on the prices. For example:

  <div class="price">
   <p class="new-price"><span class="sr-only">New Price: </span> $149.99</p>
   <p class="old-price"><span class="sr-only">Old Price: </span>$169.99</p>
  </div>
  

  You can use this to hide something visually but screen readers still can see them.

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  

  0