Product preview card component Mobile-first solution

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • This solution contains some minor semantic mistakes which may cause accessibility issues

  ---

  • The <p>PERFUME</p>, must want to be changed to normal case like Perfume

  ---

  • It’s not great for screen readers, because uppercase text will be read out as individual letters (like abbreviations). So CSS is read as C.S.S. Just as PERFUME would be read as P.E.R.F.U.M.E, not as the word Perfume

  ---

  • Don't worry we can use text-transform: uppercase to transform the letter and letter-spacing: 1rem for the text Perfume

  ---

  • And another thing that the old price is not being properly announced, you have used div element for that.

  ---

  • Actually there's a native html element which comes handy in these situations. it is del element

  ---

  • So you can use like this <del>$169.99</del>

  ---

  • These are the tips which improves the accessibility in real world situations.

  ---

  • If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  P

  Moa Davou•310

  @moadavouPosted 7 months ago

  Great work on completing this challenge!

  You should include a span with the visually-hidden class with the text of something like "Old price: ". Without it, the screen reader just reads two prices - it can be very confusing!

  0