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 6:02PM

Thanks for all this great feedback.

Yes, click, enter, or tap will move the focus to the image and the alt
text for that image.


This is not a tooltip. The region the image displays in is always present,
but the image swaps out when the user hovers, clicks/taps/hits enter on
the trigger link.

Visually it is placed to the right or left of a block of text.

The info isn't essential but it is useful. Also, it would be confusing to
use null alt text on the images - the text links would have nothing as a
target.

I like the suggestion of using aria-describedby and aria-label. That seems
to make the most sense in this scenario. Is that applicable when there
isn't an actual overlay or modal?

Best,

Judith

On 5/14/14 4:22 PM, "Jonathan Avila" < <EMAIL REMOVED> > wrote:

>[Bryan wrote] and use ARIA Tooltip markup to cause it to be announced.
>
>Bryan, using the role of tooltip doesn't cause anything to be announced.
>Generally tooltips are identified by aria-describedby which is what would
>cause a screen reader to announce the tooltip -- not simply the role of
>tooltip.
>
>Jonathan
>
>-----Original Message-----
>From: <EMAIL REMOVED>
>[mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
>Sent: Wednesday, May 14, 2014 5:58 PM
>To: 'WebAIM Discussion List'
>Subject: Re: [WebAIM] Rollover Text with Images - ARIA popup or not?
>
>Unfortunately at present aria-haspopup should only be used on menus,
>because it is explicitly mapped as such. This is why NVDA will announce
>"submenu"
>for the following:
>
><a href="#" aria-haspopup="true">
>Test
></a>
>
>The same is true for button elements.
>
>One option, if you have a link that opens an image as an overlay, you
>could use 'focus' to show it, and 'blur' to dismiss it, and use ARIA
>Tooltip markup to cause it to be announced.
>
>E.G
>
><a href="#" aria-describedby="myTooltipId"> Trigger </a>
>
><img id="myTooltipId" role="tooltip" aria-label="Text to be announced when
>rendered" ... />
>
>
>-----Original Message-----
>From: <EMAIL REMOVED>
>[mailto: <EMAIL REMOVED> ] On Behalf Of Jonathan Avila
>Sent: Wednesday, May 14, 2014 2:32 PM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] Rollover Text with Images - ARIA popup or not?
>
>Bryan, I think the aria-haspopup attribute could be useful in situations
>such as this. Is it a hard requirement that it can only be used in menus?
>It seems like it could be useful to indicate when a dialog might appear as
>well as when rollovers appear.
>
>Judith, the aria-haspopup would provide indication to ARIA supported AT
>that something opens -- a fallback could be to add the text you describe
>for non-ARIA supported technology and other users.
>
>If the content is activated by the user you'll want to move focus to the
>new content with the JavaScript focus() method and make sure that the
>revealed element can receive focus -- for example by setting
>tabindex="-1". If other content can't be rolled over until this item is
>closed you'll need a way to close the pop-up too.
>
>Best Regards,
>
>Jonathan
>
>-----Original Message-----
>From: <EMAIL REMOVED>
>[mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
>Sent: Wednesday, May 14, 2014 4:44 PM
>To: 'WebAIM Discussion List'
>Subject: Re: [WebAIM] Rollover Text with Images - ARIA popup or not?
>
>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>
>
>>>messages to <EMAIL REMOVED>
>>>messages to <EMAIL REMOVED>
>
>>>messages to <EMAIL REMOVED>
>>>