E-mail List Archives
Thread: Aria Sliders on Mobile
Number of posts in this thread: 5 (In chronological order)
From: Greg Jellin
Date: Fri, Nov 22 2019 6:36AM
Subject: Aria Sliders on Mobile
No previous message | Next message →
Hi All,
I'm investigating the use of sliders (role=slider), with the intention
of finding a slider that also works with VoiceOver/iOS and
Talkback/Android. I've read some old Webaim threads that indicate the
slider role is not well supported by VO or Talkback. Does anyone know if
anything has changed or can point me to a working slider?
I've tested several "accessible" sliders and none function as
expected/desired. The following were tested:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/slider/slider-1.html
https://dequeuniversity.com/library/aria/custom-controls/sf-slider-multirange
https://codepen.io/davidchin/full/GpNvqw
Thanks,
Greg
From: Detlev Fischer
Date: Fri, Nov 22 2019 8:28AM
Subject: Re: Aria Sliders on Mobile
← Previous message | Next message →
This example (put together by Patrick Lauke) should work with VO/iOS and
Talkback Android
Am 22.11.2019 um 14:36 schrieb Greg Jellin:
> Hi All,
>
> I'm investigating the use of sliders (role=slider), with the intention
> of finding a slider that also works with VoiceOver/iOS and
> Talkback/Android. I've read some old Webaim threads that indicate the
> slider role is not well supported by VO or Talkback. Does anyone know
> if anything has changed or can point me to a working slider?
>
> I've tested several "accessible" sliders and none function as
> expected/desired. The following were tested:
>
> https://www.w3.org/TR/wai-aria-practices-1.1/examples/slider/slider-1.html
>
>
> https://dequeuniversity.com/library/aria/custom-controls/sf-slider-multirange
>
>
> https://codepen.io/davidchin/full/GpNvqw
>
> Thanks,
>
> Greg
>
> > > > --
Detlev Fischer
Testkreis
Werderstr. 34, 20144 Hamburg
Mobil +49 (0)157 57 57 57 45
http://www.testkreis.de
Beratung, Tests und Schulungen für barrierefreie Websites
From: Detlev Fischer
Date: Fri, Nov 22 2019 8:30AM
Subject: Re: Aria Sliders on Mobile
← Previous message | Next message →
Sorry, hit ENTER accidentally before finishing mail!
This is the slider example (Patrick Lauke) you may want to look at:
https://www.w3.org/WAI/WCAG21/working-examples/providing-single-point-control-slider/
Am 22.11.2019 um 14:36 schrieb Greg Jellin:
> Hi All,
>
> I'm investigating the use of sliders (role=slider), with the intention
> of finding a slider that also works with VoiceOver/iOS and
> Talkback/Android. I've read some old Webaim threads that indicate the
> slider role is not well supported by VO or Talkback. Does anyone know
> if anything has changed or can point me to a working slider?
>
> I've tested several "accessible" sliders and none function as
> expected/desired. The following were tested:
>
> https://www.w3.org/TR/wai-aria-practices-1.1/examples/slider/slider-1.html
>
>
> https://dequeuniversity.com/library/aria/custom-controls/sf-slider-multirange
>
>
> https://codepen.io/davidchin/full/GpNvqw
>
> Thanks,
>
> Greg
>
> > > > --
Detlev Fischer
Testkreis
Werderstr. 34, 20144 Hamburg
Mobil +49 (0)157 57 57 57 45
http://www.testkreis.de
Beratung, Tests und Schulungen für barrierefreie Websites
From: Greg Jellin
Date: Fri, Nov 22 2019 8:39AM
Subject: Re: Aria Sliders on Mobile
← Previous message | Next message →
Thanks Detlev,
This component does work with both Talkback and VO by basically allowing
the user to double tap the range input min/max buttons to manipulate the
slider position. This is a great fallback for AT users on mobile.
That said, it is not a true slider (role=slider). Can we confirm that
the role=slider is still not supported by VO/Talkback?
Greg
On 11/22/2019 7:30 AM, Detlev Fischer wrote:
> Sorry, hit ENTER accidentally before finishing mail!
> This is the slider example (Patrick Lauke) you may want to look at:
> https://www.w3.org/WAI/WCAG21/working-examples/providing-single-point-control-slider/
>
>
> Am 22.11.2019 um 14:36 schrieb Greg Jellin:
>> Hi All,
>>
>> I'm investigating the use of sliders (role=slider), with the
>> intention of finding a slider that also works with VoiceOver/iOS and
>> Talkback/Android. I've read some old Webaim threads that indicate the
>> slider role is not well supported by VO or Talkback. Does anyone know
>> if anything has changed or can point me to a working slider?
>>
>> I've tested several "accessible" sliders and none function as
>> expected/desired. The following were tested:
>>
>> https://www.w3.org/TR/wai-aria-practices-1.1/examples/slider/slider-1.html
>>
>>
>> https://dequeuniversity.com/library/aria/custom-controls/sf-slider-multirange
>>
>>
>> https://codepen.io/davidchin/full/GpNvqw
>>
>> Thanks,
>>
>> Greg
>>
>> >> >> >> >
From: Bryan Garaventa
Date: Fri, Nov 22 2019 10:42AM
Subject: Re: Aria Sliders on Mobile
← Previous message | No next message
Hi,
That's correct. This component does use role="slider", but it too has to have a mobile fallback for touch devices.
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Sliders/Horizontal/demo.htm
In my last conversation with Apple about this, it is unlikely that role=slider will ever be adequately supported by VoiceOver within web technologies using standard JavaScript for drag and drop slider functionality. To do this, the accessibility API would need the ability to pass events to and from the browser where gestures like the up/down swipe movement would increment or decrement the slider, and there is no way for the platform API to identify what the intended behavior of the JavaScript is meant to be, and simulating this would end up doing nothing as it currently does. This is why the only accessible solution is to provide increment and decrement buttons in addition to the ARIA Slider widget to ensure accessibility across various platforms. In contrast, the slider widget on native iOS apps does work correctly like this, because within X Code there is an API that allows these events to pass back and forth in a manner that can be reliably processed.
In short though, ARIA Sliders using standard JavaScript for drag and drop will likely never work correctly within touch-based platforms unless a dedicated drag and drop API is created to handle this functionality at the platform level. You can read more about the background for this discussion here.
https://www.linkedin.com/pulse/important-considerations-regarding-accessible-drag-drop-garaventa/
All the best,
Bryan
Bryan Garaventa
Principal Accessibility Architect
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com