Design comparison
Community feedback
- @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
-
To better identify the main content of you site you will want to encase your entire component inside a Main Element.
-
The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.
-
This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/picture-element/
-
The name of the perfume , “Gabrielle Essence Eau De Parfum” is the most important content in your card so it should be wrapped in a Heading Element.
-
The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include a sr-only text explaining that this is the old price.
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
Marked as helpful0@VCaramesPosted about 2 years ago@Shaaamy
For people that use screen readers (have low to no vision) are not able to differentiate which price is which. All they hear is two different prices.
Since you and I can see the line through the price we can tell thats the old price. But screen readers cannot tell that there is a line through. So by including an "sr-only-text" that states something like" this was the old price" screen reader users will be able to know what price is what.
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord