I think you're really close with this one! Most of the HTML and CSS is great, but there is one glaring issue to me...
That image has a cursor pointer and hover effect on it, which implies it should be clickable. Yet you've only used a div. Think through how to do that bit accessibly. That's the real challenge with accessibility here...
Also, when writing alt text, you shouldn't need to include words like "image". It's already an image role. That avatar image would currently be announced to screenreaders as "image, Jules Wyvern Avatar image".
Marked as helpful
@DevShaunB
Posted
@grace-snow Thanks for the feedback.
I did think about making the image more accessible here. I can either use an anchor tag (assuming it will go to a different page), or I can use a button (assuming it will open a modal) instead of a div wrapper. I was also thinking about adding some sr-only visually hidden text to inform the user which card is focused (assuming an actual website will have a bunch of these cards).
Regarding the avatar image, will fix that right away.
@DevShaunB I'm not sure why you'd need visually hidden text on this... Unless you mean for the button action perhaps? Maybe Im not understanding
@DevShaunB
Posted
@grace-snow I updated it. I used an anchor tag with aria-label to wrap the image.
