γγ¬γ³γΏγ€γ³ πβ’ 64,190
@VCarames
Posted
Hey there! π Here are some suggestions to help improve your code:
- Since the images in this component add value and serve a purpose (displaying the product) it needs to be accessible β οΈ. The image needs to be applied using the
picture
element and not thebackground-image
property, as it will not only let you use different images during different breakpoints it will let apply analt tag
description to image stating what the image is.
- Do not uppercase β "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
- The only heading β οΈ in this component, is the name of the perfume; βGabrielle Essence Eau De Parfumβ . The rest of the text should be wrapped in a
paragraph
element.
- Currently, the old price (169.99) π· is not being properly announced π’ to screen readers. To fix this, you are going to wrap the the price in a
del
element and inside it you will add aspan
element with ansr-only class
that will state something like βThe previous price wasβ¦β and use CSS to make it only visible to screen readers.
More Info:π
- For improved accessibility π for your content, it is best practice to use
rem
for yourfont-size
and other property values. Whileem
is best formedia-queries
. Using these units gives users the ability to scale elements up and down, relative to a set value.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! πππͺ
Marked as helpful
1
Rafael Maia Chieregattoβ’ 320
@rafaelmaiach
Posted
@vcarames Thank you for your great feedback. I've fixed all the issues you pointed.
1
γγ¬γ³γΏγ€γ³ πβ’ 64,190
@VCarames
Posted
@rafaelmaiach
Glad I could help! π
0