E-mail List Archives

Search E-mail List Archives for

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

From: Judith.A.Blankman@wellsfargo.com
Date: Mon, Sep 08 2014 3:28PM
Subject: Seeking selected link in Carousel examples
No previous message | Next message →

I remember a few presenters at CSUN describing how their carousels that used dots for navigation were coded. They were marked up as tabs, even though visually they look nothing like tabs. I believe ARIA was part of the mix.

I was doing some research for one of our front end developers to see what I could learn about ARIA for defining a selected state for a list item. I learned that aria-selected doesn't apply to links or list items.

Does this mean that there is no way to code a selected state for a list of dots that are also links? Would a mix of aria-controls and aria-label make this any easier? I still don't see a way to indicate something is selected using ARIA.

Seems like the only option is to dynamically include "you are here" or "selected" text to the image's alt text. Simply not linking the selected item doesn't seem sufficient since it then becomes a non-focusable element.

Any and all tips are most welcome.


Thanks,


Judith Blankman

Accessibility Strategist
Customer Experience



Wells Fargo Digital Channels Group | 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: Mon, Sep 08 2014 10:48PM
Subject: Re: Seeking selected link in Carousel examples
← Previous message | Next message →

Can you send through the markup for one of the actionable dots?

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Monday, September 08, 2014 2:28 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Seeking selected link in Carousel examples

I remember a few presenters at CSUN describing how their carousels that used dots for navigation were coded. They were marked up as
tabs, even though visually they look nothing like tabs. I believe ARIA was part of the mix.

I was doing some research for one of our front end developers to see what I could learn about ARIA for defining a selected state for
a list item. I learned that aria-selected doesn't apply to links or list items.

Does this mean that there is no way to code a selected state for a list of dots that are also links? Would a mix of aria-controls
and aria-label make this any easier? I still don't see a way to indicate something is selected using ARIA.

Seems like the only option is to dynamically include "you are here" or "selected" text to the image's alt text. Simply not linking
the selected item doesn't seem sufficient since it then becomes a non-focusable element.

Any and all tips are most welcome.


Thanks,


Judith Blankman

Accessibility Strategist
Customer Experience



Wells Fargo Digital Channels Group | 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: Gunderson, Jon R
Date: Tue, Sep 09 2014 3:52AM
Subject: Re: Seeking selected link in Carousel examples
← Previous message | Next message →

The w3c aria working group is aware of this issue and is anticipating on having an aria property in aria 1.1 specification to solve this problem

Jon Gunderson
Sent from my iPhone

> On Sep 9, 2014, at 12:49 AM, "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = > wrote:
>
> Can you send through the markup for one of the actionable dots?
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
> = EMAIL ADDRESS REMOVED =
> Sent: Monday, September 08, 2014 2:28 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Seeking selected link in Carousel examples
>
> I remember a few presenters at CSUN describing how their carousels that used dots for navigation were coded. They were marked up as
> tabs, even though visually they look nothing like tabs. I believe ARIA was part of the mix.
>
> I was doing some research for one of our front end developers to see what I could learn about ARIA for defining a selected state for
> a list item. I learned that aria-selected doesn't apply to links or list items.
>
> Does this mean that there is no way to code a selected state for a list of dots that are also links? Would a mix of aria-controls
> and aria-label make this any easier? I still don't see a way to indicate something is selected using ARIA.
>
> Seems like the only option is to dynamically include "you are here" or "selected" text to the image's alt text. Simply not linking
> the selected item doesn't seem sufficient since it then becomes a non-focusable element.
>
> Any and all tips are most welcome.
>
>
> Thanks,
>
>
> Judith Blankman
>
> Accessibility Strategist
> Customer Experience
>
>
>
> Wells Fargo Digital Channels Group | 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: Birkir R. Gunnarsson
Date: Tue, Sep 09 2014 5:09PM
Subject: Re: Seeking selected link in Carousel examples
← Previous message | Next message →

This is a long-discussed problem actually.
You would have to map any link (or other underlying focusable element)
as a tab before you can use aria-selected.
See for instance:
http://www.romaingervois.fr/implementations/en/carousel.html

You could map them as buttons and then use aria-pressed="true" on the
selected one, but that really would be presenting the user with
something very different from what you are displaying.

You could use role="presentation" on the currently active one. It
would still remain focusable but would not be announced as a
link/button/tab (whatever the basetype is that you use), so that way
it would be different from the rest. This might be ok if you visibly
mae the active dot/link look like it is not a link or if you made it
look disabled you could use aria-disabled for the equivalent
programmatic distinction.
Then there is always adding off-screen hidden text of course to the active link.

We do need an aria attribute that indicates active or selected that
can be used on any focusable, even possibly on non-focusable element
in a set of elements.
Maybe in the next version of the ARIA spec, who knows.
Cheers
-B


On 9/9/14, Gunderson, Jon R < = EMAIL ADDRESS REMOVED = > wrote:
> The w3c aria working group is aware of this issue and is anticipating on
> having an aria property in aria 1.1 specification to solve this problem
>
> Jon Gunderson
> Sent from my iPhone
>
>> On Sep 9, 2014, at 12:49 AM, "Bryan Garaventa"
>> < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Can you send through the markup for one of the actionable dots?
>>
>> -----Original Message-----
>> From: = EMAIL ADDRESS REMOVED =
>> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
>> = EMAIL ADDRESS REMOVED =
>> Sent: Monday, September 08, 2014 2:28 PM
>> To: = EMAIL ADDRESS REMOVED =
>> Subject: [WebAIM] Seeking selected link in Carousel examples
>>
>> I remember a few presenters at CSUN describing how their carousels that
>> used dots for navigation were coded. They were marked up as
>> tabs, even though visually they look nothing like tabs. I believe ARIA was
>> part of the mix.
>>
>> I was doing some research for one of our front end developers to see what
>> I could learn about ARIA for defining a selected state for
>> a list item. I learned that aria-selected doesn't apply to links or list
>> items.
>>
>> Does this mean that there is no way to code a selected state for a list of
>> dots that are also links? Would a mix of aria-controls
>> and aria-label make this any easier? I still don't see a way to indicate
>> something is selected using ARIA.
>>
>> Seems like the only option is to dynamically include "you are here" or
>> "selected" text to the image's alt text. Simply not linking
>> the selected item doesn't seem sufficient since it then becomes a
>> non-focusable element.
>>
>> Any and all tips are most welcome.
>>
>>
>> Thanks,
>>
>>
>> Judith Blankman
>>
>> Accessibility Strategist
>> Customer Experience
>>
>>
>>
>> Wells Fargo Digital Channels Group | 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 =
>>
>> >> >> > > > >


--
Work hard. Have fun. Make history.

From: Judith.A.Blankman@wellsfargo.com
Date: Tue, Sep 09 2014 5:23PM
Subject: Re: Seeking selected link in Carousel examples
← Previous message | Next message →

Thanks for the suggestions everyone. It's comforting to hear that I'm not
alone and this is a known issue.

Bryan, I'm grabbing the code and sending to you off this list, if that's
OK.

On 9/9/14 4:09 PM, "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
wrote:

>This is a long-discussed problem actually.
>You would have to map any link (or other underlying focusable element)
>as a tab before you can use aria-selected.
>See for instance:
>http://www.romaingervois.fr/implementations/en/carousel.html
>
>You could map them as buttons and then use aria-pressed="true" on the
>selected one, but that really would be presenting the user with
>something very different from what you are displaying.
>
>You could use role="presentation" on the currently active one. It
>would still remain focusable but would not be announced as a
>link/button/tab (whatever the basetype is that you use), so that way
>it would be different from the rest. This might be ok if you visibly
>mae the active dot/link look like it is not a link or if you made it
>look disabled you could use aria-disabled for the equivalent
>programmatic distinction.
>Then there is always adding off-screen hidden text of course to the
>active link.
>
>We do need an aria attribute that indicates active or selected that
>can be used on any focusable, even possibly on non-focusable element
>in a set of elements.
>Maybe in the next version of the ARIA spec, who knows.
>Cheers
>-B
>
>
>On 9/9/14, Gunderson, Jon R < = EMAIL ADDRESS REMOVED = > wrote:
>> The w3c aria working group is aware of this issue and is anticipating on
>> having an aria property in aria 1.1 specification to solve this problem
>>
>> Jon Gunderson
>> Sent from my iPhone
>>
>>> On Sep 9, 2014, at 12:49 AM, "Bryan Garaventa"
>>> < = EMAIL ADDRESS REMOVED = > wrote:
>>>
>>> Can you send through the markup for one of the actionable dots?
>>>
>>> -----Original Message-----
>>> From: = EMAIL ADDRESS REMOVED =
>>> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
>>> = EMAIL ADDRESS REMOVED =
>>> Sent: Monday, September 08, 2014 2:28 PM
>>> To: = EMAIL ADDRESS REMOVED =
>>> Subject: [WebAIM] Seeking selected link in Carousel examples
>>>
>>> I remember a few presenters at CSUN describing how their carousels that
>>> used dots for navigation were coded. They were marked up as
>>> tabs, even though visually they look nothing like tabs. I believe ARIA
>>>was
>>> part of the mix.
>>>
>>> I was doing some research for one of our front end developers to see
>>>what
>>> I could learn about ARIA for defining a selected state for
>>> a list item. I learned that aria-selected doesn't apply to links or
>>>list
>>> items.
>>>
>>> Does this mean that there is no way to code a selected state for a
>>>list of
>>> dots that are also links? Would a mix of aria-controls
>>> and aria-label make this any easier? I still don't see a way to
>>>indicate
>>> something is selected using ARIA.
>>>
>>> Seems like the only option is to dynamically include "you are here" or
>>> "selected" text to the image's alt text. Simply not linking
>>> the selected item doesn't seem sufficient since it then becomes a
>>> non-focusable element.
>>>
>>> Any and all tips are most welcome.
>>>
>>>
>>> Thanks,
>>>
>>>
>>> Judith Blankman
>>>
>>> Accessibility Strategist
>>> Customer Experience
>>>
>>>
>>>
>>> Wells Fargo Digital Channels Group | 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 =
>>>
>>> >>> >>> >> >> >> >>
>
>
>--
>Work hard. Have fun. Make history.
>>>

From: Jonathan Avila
Date: Wed, Sep 10 2014 8:01PM
Subject: Re: Seeking selected link in Carousel examples
← Previous message | No next message

> Does this mean that there is no way to code a selected state for a list of dots that are also links? Would a mix of aria-controls and aria-label make this any easier? I still don't see a way to indicate something is selected using ARIA.

These remind me of the page indicators on iOS. For example, VoiceOver announces "page 1 of 7, adjustable, swipe up or down to adjust."

It think it makes more sense to treat the dots as one control with different values rather than separate controls one of which is selected. Perhaps an ARIA slider is an equivalent.

Jonathan

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of = EMAIL ADDRESS REMOVED =
Sent: Monday, September 08, 2014 5:28 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Seeking selected link in Carousel examples

I remember a few presenters at CSUN describing how their carousels that used dots for navigation were coded. They were marked up as tabs, even though visually they look nothing like tabs. I believe ARIA was part of the mix.

I was doing some research for one of our front end developers to see what I could learn about ARIA for defining a selected state for a list item. I learned that aria-selected doesn't apply to links or list items.

Does this mean that there is no way to code a selected state for a list of dots that are also links? Would a mix of aria-controls and aria-label make this any easier? I still don't see a way to indicate something is selected using ARIA.

Seems like the only option is to dynamically include "you are here" or "selected" text to the image's alt text. Simply not linking the selected item doesn't seem sufficient since it then becomes a non-focusable element.

Any and all tips are most welcome.


Thanks,


Judith Blankman

Accessibility Strategist
Customer Experience



Wells Fargo Digital Channels Group | 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 =