@zineb-Bou
Posted
Hi, there your solution looks good,
some suggestions that may be helpful:
-
You can use the <picture/> tag for the card image, this will allow you to set different images based on the screen viewport instead of using <div/>
-
Since the image is just purely decorative and there is no alt provided, use aria-hidden: true to hide it from the screen reader.
-
The same thing applied to the icons, we don't want the screen reader to read it since it's purely decorative.
-
You need to add the alt for the avatar image(it's an informative image), the screen reader will read the image source path if we don't add any alt text.
-
Don't use <hr> for decoration purposes, it's used for indicating if there is a transition between headers and paragraphs, you can use only CSS to draw the line using the <div> border and play with card padding to make the left and right space.
Marked as helpful
@bajajharsha
Posted
@zineb-Bou Hey, thanks for the suggestions. For the horizontal line it didn't strike me to use borders but now it makes more sense. I'll take care to add alt for informative images.