WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Rollover Text with Images - ARIA popup or not?

for

From: Judith.A.Blankman@wellsfargo.com
Date: May 14, 2014 2:52PM

Hi, Brian,

I was hoping you'd chime in. No, it's not a menu. It's a bulleted list of
content with some links that reveal an image upon
rollover/hover/click/enter/tap.

On 5/14/14 1:44 PM, "Bryan Garaventa" < <EMAIL REMOVED> > wrote:

>Is the popup a menu? One thing to keep in mind is that aria-haspopup
>should
>only be used on menus.
>E.G
>http://www.w3.org/TR/wai-aria/states_and_properties#aria-haspopup
>
>
>-----Original Message-----
>From: <EMAIL REMOVED>
>[mailto: <EMAIL REMOVED> ] On Behalf Of
> <EMAIL REMOVED>
>Sent: Wednesday, May 14, 2014 1:26 PM
>To: <EMAIL REMOVED>
>Subject: [WebAIM] Rollover Text with Images - ARIA popup or not?
>
>I am advising an interaction design team on how to make a new component
>accessible.
>
>On a related, but slightly different component - balloon help (aka bubble
>help), we are using ARIA (aria-haspopup="true") and indicating the
>beginning
>and end of the popup with hidden text.
>
>This new component is not an actual popup. It pairs rollover text with a
>changing image - on hover, click, key press enter, and tap on the link.
>
>Accessibility requirements:
>
> * The image will include meaningful alt text
> * Hidden text after the trigger link reads "displays image"
>
>Would this type of interaction be perceived as a popup to someone who
>cannot see the screen?
>
>Logically I don't think so, but wanted to see what others would advise. Is
>hidden text "displays image" sufficient to provide the intended perception
>and consumption of the information?
>
>
>Thanks,
>
>
>Judith Blankman
>
>Interaction Designer, Accessibility Strategist Customer Experience
>
>
>
>Wells Fargo Digital Channels Group (formerly ISG) | 550 California
>Street,
>2nd floor | San Francisco, CA 94104
>
>MAC A0122-020
>
>Tel 415-947-6583 | Cell 415-601-1114 | Fax 415-974-7452
>
>
> <EMAIL REMOVED>
>
>
>
>
>>>messages to <EMAIL REMOVED>
>
>>>