Remember that text should never be in divs or spans alone. Always use a meaningful element.
I wouldn't expect the main image to have an alt description to be honest. To me, that looks decorative.
Try to remember to include a modern css reset at the start of the styles in every project.
I would expect a pseudo in this to make the whole card clickable too. That technique is covered on the inclusive components site
Marked as helpful
Thank you for your feedback! These are helpful suggestions and looking forward to implement them and read about technique to make whole card clickable.
Funny thing is that I agree that main image is decorative because it doesn't add any information to the content of a page in that particular case, but somehow while I was building this component I thought that other blog cards may have more meaningful images that adds some information to content of that component so I should keep it. My mind went blank because alt description for every image would be provided separately and it can be blank for some and descriptive for others.. my bad!
Edit: This was a nice read on why we should make the entire card clickable! I went down the road with redundant click method since it was more appealing to me that users can and should select/copy text within my card without clicking on it. But I think pseudo-content trick will find uses in other places. I left some console.log
's in code if you want to check it out!