Hello
There's a few issues on the html in this which are causing accessibility errors
-
Every img must have an alt attribute. Look up how to use it correctly for important vs decorative images
-
The link needs to wrap the whole image - try focusing on keyboard and see what happens
-
The hover style should also happen on focus-visible
-
The link wrapping the image has no accessible name. Search engines and screenreaders would have no idea what that link does
-
You are using padding to separate items (create outside space) instead of margin
-
Do not give your card a min-width. There is no need. Just a max-width. This is overflowing my mobile screen at the moment and hitting screen edges. Instead the card should have a max-width only and some margin around it. The image/overlay div inside should not have an explicit width either - just width 100%
-
You are missing a heading element. The anchor tag on the title should be within this heading
-
Inline svgs that are decorative need
aria-hidden="true" focusable="false"on them -
Make use of gap and justify content to create horizontal spacing between the price and time elements, no weird calc margins are needed
-
Every page must have a main landmark
Marked as helpful
@zouvier
Posted
@grace-snow Went through your suggestions and fixed it up. Thanks 🙏
