E-mail List Archives
Thread: Mouseover/hover effect on images
Number of posts in this thread: 2 (In chronological order)
From: Nicole
Date: Wed, Aug 17 2016 10:43AM
Subject: Mouseover/hover effect on images
No previous message | Next message →
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
From: Birkir R. Gunnarsson
Date: Wed, Aug 17 2016 11:03AM
Subject: Re: Mouseover/hover effect on images
← Previous message | No next message
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 ADDRESS 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.