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 15, 2014 4:20PM

Hi, Brian,

Sorry we don't have a live version - yet. We are trying to specify it.

I'm thinking the simple route for now is to include hidden text that
informs the user that an image displays right after the link. I know it
seems like a bit of a hack, but there may not be a functional equivalent
for this type of thing in ARIA.

Best,

Judith



On 5/14/14 6:25 PM, "Bryan Garaventa" < <EMAIL REMOVED> > wrote:

>I'm having some trouble visualizing the scenario, do you have a live
>example?
>
>-----Original Message-----
>From: <EMAIL REMOVED>
>[mailto: <EMAIL REMOVED> ] On Behalf Of
> <EMAIL REMOVED>
>Sent: Wednesday, May 14, 2014 5:03 PM
>To: <EMAIL REMOVED>
>Subject: Re: [WebAIM] Rollover Text with Images - ARIA popup or not?
>
>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>
>>>>>>messages to <EMAIL REMOVED>
>
>>>messages to <EMAIL REMOVED>
>
>>>