WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Seeking selected link in Carousel examples

for

From: Judith.A.Blankman@wellsfargo.com
Date: Sep 9, 2014 5:23PM

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 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 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 REMOVED> > wrote:
>>>
>>> Can you send through the markup for one of the actionable dots?
>>>
>>> -----Original Message-----
>>> From: <EMAIL REMOVED>
>>> [mailto: <EMAIL REMOVED> ] On Behalf Of
>>> <EMAIL REMOVED>
>>> Sent: Monday, September 08, 2014 2:28 PM
>>> To: <EMAIL 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 REMOVED>
>>>
>>>
>>>
>>>
>>> >>> >>> messages to <EMAIL REMOVED>
>>>
>>> >>> >>> >> >> >> >>
>
>
>--
>Work hard. Have fun. Make history.
>>>