WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 13 (In chronological order)

From: Judith.A.Blankman@wellsfargo.com
Date: Wed, May 14 2014 2:26PM
Subject: Rollover Text with Images - ARIA popup or not?
No previous message | Next message →

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 ADDRESS REMOVED =

From: Bryan Garaventa
Date: Wed, May 14 2014 2:44PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | Next message →

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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Wednesday, May 14, 2014 1:26 PM
To: = EMAIL ADDRESS 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 ADDRESS REMOVED =




messages to = EMAIL ADDRESS REMOVED =

From: Judith.A.Blankman@wellsfargo.com
Date: Wed, May 14 2014 2:52PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
> = EMAIL ADDRESS REMOVED =
>Sent: Wednesday, May 14, 2014 1:26 PM
>To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
>
>
>
>>>messages to = EMAIL ADDRESS REMOVED =
>
>>>

From: Bryan Garaventa
Date: Wed, May 14 2014 3:03PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | Next message →

No problem :)

So the image is the tooltip? I'm trying to understand, you mouse over,
click, or focus to the triggering element, and it pops up an image as the
overlay?


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Wednesday, May 14, 2014 1:52 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Rollover Text with Images - ARIA popup or not?

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 ADDRESS 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 ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
> = EMAIL ADDRESS REMOVED =
>Sent: Wednesday, May 14, 2014 1:26 PM
>To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
>
>
>
>>>messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =

From: Jonathan Avila
Date: Wed, May 14 2014 3:31PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | Next message →

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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Wednesday, May 14, 2014 1:26 PM
To: = EMAIL ADDRESS 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 ADDRESS REMOVED =




messages to = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =

From: Bryan Garaventa
Date: Wed, May 14 2014 3:57PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | Next message →

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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Wednesday, May 14, 2014 1:26 PM
To: = EMAIL ADDRESS 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 ADDRESS REMOVED =




messages to = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =
messages to = EMAIL ADDRESS REMOVED =

From: Bryan Garaventa
Date: Wed, May 14 2014 4:09PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | Next message →

I should clarify, it's explicitly mapped for buttons in the Role Mapping
table at
http://www.w3.org/TR/wai-aria-implementation/
Behaviorally, NVDA treats both links and buttons the same however.

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Wednesday, May 14, 2014 2: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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Wednesday, May 14, 2014 1:26 PM
To: = EMAIL ADDRESS 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 ADDRESS REMOVED =




messages to = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =
messages to = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =

From: Jonathan Avila
Date: Wed, May 14 2014 5:22PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | Next message →

[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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Wednesday, May 14, 2014 1:26 PM
To: = EMAIL ADDRESS 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 ADDRESS REMOVED =




messages to = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =
messages to = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =

From: Judith.A.Blankman@wellsfargo.com
Date: Wed, May 14 2014 6:02PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
> = EMAIL ADDRESS REMOVED =
>Sent: Wednesday, May 14, 2014 1:26 PM
>To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
>
>
>
>>>messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =
>>>messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =
>>>

From: Bryan Garaventa
Date: Wed, May 14 2014 7:23PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | Next message →

Yes, I'm aware of this. There is some correlation though if the id ref
points to an element with role=tooltip.


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jonathan Avila
Sent: Wednesday, May 14, 2014 4:22 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Rollover Text with Images - ARIA popup or not?

[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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Wednesday, May 14, 2014 1:26 PM
To: = EMAIL ADDRESS 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 ADDRESS REMOVED =




messages to = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =
messages to = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =
messages to = EMAIL ADDRESS REMOVED =

From: Bryan Garaventa
Date: Wed, May 14 2014 7:25PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | Next message →

I'm having some trouble visualizing the scenario, do you have a live
example?

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Wednesday, May 14, 2014 5:03 PM
To: = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
> = EMAIL ADDRESS REMOVED =
>Sent: Wednesday, May 14, 2014 1:26 PM
>To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
>
>
>
>>>messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =
>>>messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =
>>>messages to = EMAIL ADDRESS REMOVED =

messages to = EMAIL ADDRESS REMOVED =

From: Judith.A.Blankman@wellsfargo.com
Date: Thu, May 15 2014 4:20PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | Next message →

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 ADDRESS REMOVED = > wrote:

>I'm having some trouble visualizing the scenario, do you have a live
>example?
>
>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED =
>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
> = EMAIL ADDRESS REMOVED =
>Sent: Wednesday, May 14, 2014 5:03 PM
>To: = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
>> = EMAIL ADDRESS REMOVED =
>>Sent: Wednesday, May 14, 2014 1:26 PM
>>To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>
>>
>>
>>
>>>>>>messages to = EMAIL ADDRESS REMOVED =
>>
>>>>>>messages to = EMAIL ADDRESS REMOVED =
>>>>>>messages to = EMAIL ADDRESS REMOVED =
>>
>>>>>>messages to = EMAIL ADDRESS REMOVED =
>>>>>>messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =
>
>>>

From: Jesse Hausler
Date: Thu, May 15 2014 6:23PM
Subject: Re: Rollover Text with Images - ARIA popup or not?
← Previous message | No next message

I know i'm late to the party here, but I hope i can help out.

Are we talking about one of those things you see on news sites where there
are 5 small squares for a news story and clicking on those changes the
larger center stage news story. Then you can click the links inside of that?

If so, maybe just use a tabset semantic...

If i'm totally of base on that idea, you could just give your changing
region an aria-live="polite" and aria-atomic="true" state. When it's
updated via one of the methods you listed, the SR will get the update.

Do you have an example on where this is coming from, something on dribbble
or maybe a wireframe?

jesse


On Thu, May 15, 2014 at 3:20 PM, < = EMAIL ADDRESS REMOVED = > wrote:

> 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 ADDRESS REMOVED = >
> wrote:
>
> >I'm having some trouble visualizing the scenario, do you have a live
> >example?
> >
> >-----Original Message-----
> >From: = EMAIL ADDRESS REMOVED =
> >[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
> > = EMAIL ADDRESS REMOVED =
> >Sent: Wednesday, May 14, 2014 5:03 PM
> >To: = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
> >>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
> >>[mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
> >>[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
> >> = EMAIL ADDRESS REMOVED =
> >>Sent: Wednesday, May 14, 2014 1:26 PM
> >>To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
> >>
> >>
> >>
> >>
> >>> >>> >>messages to = EMAIL ADDRESS REMOVED =
> >>
> >>> >>> >>messages to = EMAIL ADDRESS REMOVED =
> >>> >>> >>messages to = EMAIL ADDRESS REMOVED =
> >>
> >>> >>> >>messages to = EMAIL ADDRESS REMOVED =
> >>> >>> >>messages to = EMAIL ADDRESS REMOVED =
> >
> >> >> >messages to = EMAIL ADDRESS REMOVED =
> >
> >> >> >>
> > > >