Product preview card component

Community feedback

• 

  Comradeintense•110

  @comradeintensePosted over 1 year ago

  Looks pretty good! Regarding the accessibility part a thing I learned when I did this project, is that for people who are using a screen reader, the pricing will be spoken something like: one hundred forty nine dot ninety nine , one hundred sixty nine dot ninety nine.

  So what you want to do is give some context just for the screen readers. Based on your code:

  <div className="pricing">
  <h1 className="sale-price">$149.99</h1>
  <p className="price">$169.99 </p>
  </div>
  

  you could add two paragraphs or spans with a class like "visually-hidden" like so:

  <div className="pricing">
  <span className="visually-hidden">Current price on sale:</span>
  <h1 className="sale-price">$149.99</h1>
  <span className="visually-hidden">Original price:</span>
  <p className="price">$169.99 </p>
  </div>
  

  And then in the css:

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

  This will hide the spans in the browser, but will be read by screen readers. The CSS I got from here: Orange Accessibility

  If you ever use TailwindCSS - there is a utility class called "sr-only" which does exactly the same thing.

  Hope it helps!

  Marked as helpful

  0

  ---

  

  denise•270

  @moncadadPosted over 1 year ago

  @comradeintense Thank you for the feedback I'll be looking into those resources, and implementing the tips.

  0