DEV Community

Discussion on: Images with hoverable Overlays

Collapse
 
jonaslinn profile image
Jonas Linn

Hey Milan, nice post!

A few hints regarding semantics and accessibility. There are two html elements that are perfect for your case: <figure> and <figcaption>.

It is just a quick fork, but it is now accessible via keyboard. Screenreaders will still read it, as it's only hidden with the opacity property.

Collapse
 
mikister profile image
Milan Radojević • Edited

Thanks for the suggestion, I'm not too knowledgeable when it comes to accessibility so I appreciate the tip. I'll be sure to edit the article to incorporate it.

Edit: And done, I added the changes.