WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Synchronic Alternatives for Sliders

for

From: Jonathan Cohn
Date: Feb 12, 2017 12:10PM

To re-phrase your issue if I am understanding you correctly...

1. A slider is what we in the US call a carousel, an area of the screen where graphics with links are scrolled in one act a time.
2. You want to be able to get a complete list of all the elements of the slider/ or Carousel.

I think the only way to do this would be to create a button or link to a static view of all the images in the carasel.

Best wishes,

Jonathan Cohn



> On Feb 11, 2017, at 3:14 PM, < <EMAIL REMOVED> > < <EMAIL REMOVED> > wrote:
>
> Thanks Bryan too!
> It seems that "Slider" is in English spontaneously understood as the form
> element and not the visual design element, as I already discovered in
> Birkirs reply. Is the German usage of this term really so different?
> On your link:
> http://whatsock.com/tsg/Coding%20Arena/Carousels,%20Slideshows,%20and%20Wiza
> rds/Carousel%20(Flat%20from%20XML%20with%20Overrides)/demo.htm I found my
> problem again. Try it yourself:
> 1. Press Jawskey + F3 for "Virtual HTML Functions" (This should be rather
> the English translation for the German translation, which I get.)
> 2. Press (perhaps) G for "graphics" to list up the alt-texts for images or
> some other info about the images to list them up.
> 3. Review the result again and again and you'll find different results.
> This is the problem, I want to have discussed.
> Sorry, I didn't expect the terminology problems!
> From the origin country of the Terminator!
> Wolfgang Berndorfer
> The Terminologytator
>
> -----Ursprüngliche Nachricht-----
> Von: WebAIM-Forum [mailto: <EMAIL REMOVED> ] Im Auftrag
> von Bryan Garaventa
> Gesendet: Samstag, 11. Februar 2017 00:30
> An: WebAIM Discussion List
> Betreff: Re: [WebAIM] Synchronic Alternatives for Sliders
>
> Hi,
> Regarding sliders, the only way to make JavaScript enabled drag and drop
> slider controls accessible at present is by using ARIA as documented in the
> spec. You can see an example of this here which uses all of these
> attributes:
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20Sliders/Horizontal/demo.htm
>
> Making a simulated slider control keyboard accessible without also including
> these ARIA attributes and dynamic behavior will result in an inaccessible
> slider for non-sighted screen reader users regardless.
>
> This is more fully documented in the ARIA Role Matrices table at
> http://whatsock.com/training/matrices/#slider
>
> If you are sighted, you can use Visual ARIA to examine this role usage as
> these ARIA attributes are dynamically updated in realtime, available at
> http://whatsock.com/training/matrices/visual-aria.htm
>
> There are some caveats related to such sliders however to be aware of. Drag
> and drop sliders that use JavaScript like this are not natively accessible
> in iOS, requiring users to double tap and hold with one finger when
> VoiceOver is running to pass the key through then drag one finger in order
> to move the slider. Another option is to add a Decrement and Increment
> button on the left and right side of the slider so that tapping one or the
> other will cause the slider to move accordingly on touch screen devices.
>
> The ARIA Slider control referenced above includes this capability if anyone
> wishes to add it by including event hooks that can be tied to such buttons
> to programatically update the slider like this. This code is included in the
> TSG archive at
> https://github.com/accdc/tsg
>
> Regarding carousels, Birkir is right, the W3C tutorial is meant to provide
> the clearest guidance for making carousels accessible, because there is a
> lot that goes into making this work. I worked with the authors when this was
> written to help make this as clear as possible.
> http://www.w3.org/WAI/tutorials/carousels/
>
> You can see a live example of these concepts at
> http://whatsock.com/tsg/Coding%20Arena/Carousels,%20Slideshows,%20and%20Wiza
> rds/Carousel%20(Flat%20from%20XML%20with%20Overrides)/demo.htm
>
> The code for which is also included in the above GitHub project for review.
>
>
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> <EMAIL REMOVED>
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>