Frontend Mentor | Comradeintense's profile

@moncadad

Submitted about 1 year ago

I'd appreciate any feedback as well as any recommendations about how to make this project accessible.

Product preview card component

@comradeintense

Posted about 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

Comradeintense

All comments

Product preview card component