Recent searches
Search options
#Accessibility question for people who use #screenreaders:
I have a website with a gallery of pixel art images. Each image features alt text describing it.
However, I would also like to show additional information, namely the theme prompt the image was made for, upon hovering over the image.
Can I have both alt text and hover text or does it end up messing up something?
I looked it up on the web and found contradictory information.
@lianna Why not just put a caption under the picture? In addition to the alt text
@lianna Why does it need to be triggered by hover? What about keyboard or touch users? I would suggest that the extra notes are underneath the image, like a caption.
But however it's visually presented, what you need here is *accessible description*.
The element with the notes should have an ID, then you add `aria-describedby="..."` to the image (matching the notes ID), and the notes will then be announced by screen readers after they announce the alt text.
@lianna This article should be helpful -- https://tetralogical.com/blog/2023/04/05/accessible-names-and-descriptions/
@lianna If a caption under the picture isn't acceptable, I would use a (i) button to activate additional text (div overlay, modal, what-have-you).
This will work better on mobile, keyboard accessible and would expect it to be usable by screen readers with appropriate announcements.