Skip to content
OverviewSolutions
9
Comments
1
Comradeintense
@comradeintense

All comments

  • 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