WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mouseover/hover effect on images

for

From: Birkir R. Gunnarsson
Date: Aug 17, 2016 11:03AM

Sounds like you need aria-describedby on the link that references the
text that is displayed on mouse/keyboard hover.
See e.g. http://accessibility.athena-ict.com/aria/examples/tooltip.shtml
Google "accessible tooltip."
Also try to avoid having two different links that point to the same
resource, it is better usability if you can merge an image link and
text link into 1:
see: http://www.w3.org/TR/WCAG20-TECHS/H2.html



On 8/17/16, Nicole < <EMAIL REMOVED> > wrote:
> 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
>
> > > > >


--
Work hard. Have fun. Make history.