WebAIM - Web Accessibility In Mind

E-mail List Archives

Mouseover/hover effect on images

for

From: Nicole
Date: Aug 17, 2016 10:43AM

Hello

I am seeking guidance on how to ensure a mouseover/hover effect on an
image is accessible. The hover is on a linked image and when activated
reveals additional descriptive content over the the image.

Here is the current behavior:

We have a set of 3 promo images each hyperlinked to different web
pages. In its native state each promo image has short text overlaid as
well as a call to action button (link). The ALT attribute of the image
is the short overlay text. The image itself is hyperlinked and the
call to action button is separate hyperlink (both go to the same page).
When the user mouses over the image new descriptive text is revealed
and the original call to action button continues to exist. It appears
this hover action is being controlled by CSS.

Additionally, when keyboard focus lands on the promo image(s) (via tab),
the hover text gets revealed. As a sighted user I can detect/understand
the appearance of this new text. When I test with JAWS and I tab to one
of the promo images I am able to use the arrow keys to get JAWS to read
the hover text.

However, my concern is that I know to engage with the keyboard (arrow
keys) because I can "see" the newly revealed hover text. How would a
non-sighted person using JAWS/NVDA/VO be able to understand that new
text has appeared when keyboard focus lands on one of the promo images
and then begin to use keyboard controls to interact/hear the newly
revealed text. I don't hear JAWS announce a cue such as "onmouseover".

Hopefully you can understand the basic behavior from my description.
Any guidance/suggestions on how to improve the overall accessibility of
this scenario is welcome.

--
Nicole Bergstrom
Accessibility Consultant