WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Sliders with two thumbs on mobile

for

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

From: Ajay Sharma
Date: Tue, Dec 17 2019 8:25PM
Subject: Sliders with two thumbs on mobile
No previous message | Next message →

Hi,

We have a slider with two thumbs, through which the minimum or maximum value could be adjusted. Natively on iOS slider is adjusted with single finger up / down flick and on android, by volume keys, but that's the case with single thumb sliders, and it does not seem to work in this situation.

I am looking for some thoughts around the best practices to make it accessible with screenreader on mobile.

Thanks!
Ajay

From: Murphy, Sean
Date: Tue, Dec 17 2019 9:00PM
Subject: Re: Sliders with two thumbs on mobile
← Previous message | Next message →

AJ,

What do you mean by two thumb slider? Haven't heard of the term before.

Sean

From: shankar shan
Date: Tue, Dec 17 2019 11:41PM
Subject: Re: Sliders with two thumbs on mobile
← Previous message | Next message →

I think he is talking on the vo up and down button i guess.

On 12/17/19, Murphy, Sean < = EMAIL ADDRESS REMOVED = > wrote:
> AJ,
>
> What do you mean by two thumb slider? Haven't heard of the term before.
>
> Sean
>
>

From: shankar shan
Date: Tue, Dec 17 2019 11:43PM
Subject: Re: Sliders with two thumbs on mobile
← Previous message | Next message →

I think he is talking about the soft buttons for the increasing and
the decreasing vallues with the slider.

On 12/18/19, shankar shan < = EMAIL ADDRESS REMOVED = > wrote:
> I think he is talking on the vo up and down button i guess.
>
> On 12/17/19, Murphy, Sean < = EMAIL ADDRESS REMOVED = > wrote:
>> AJ,
>>
>> What do you mean by two thumb slider? Haven't heard of the term before.
>>
>> Sean
>>
>>

From: glen walker
Date: Wed, Dec 18 2019 11:52AM
Subject: Re: Sliders with two thumbs on mobile
← Previous message | Next message →

Have you already looked at "Slider (Multi-Thumb)" in the authoring practice?

https://www.w3.org/TR/wai-aria-practices/#slidertwothumb
https://www.w3.org/TR/wai-aria-practices/examples/slider/multithumb-slider.html

The example works ok with the keyboard and with NVDA but does not work on
ios. The adjustable value for the slider doesn't respond to flicks up/down
even when the rotor is set to "adjust value". I don't have an android
device to test the volume keys.


On Tue, Dec 17, 2019 at 8:26 PM Ajay Sharma < = EMAIL ADDRESS REMOVED = >
wrote:

> Hi,
>
> We have a slider with two thumbs, through which the minimum or maximum
> value could be adjusted. Natively on iOS slider is adjusted with single
> finger up / down flick and on android, by volume keys, but that's the case
> with single thumb sliders, and it does not seem to work in this situation.
>
> I am looking for some thoughts around the best practices to make it
> accessible with screenreader on mobile.
>
> Thanks!
> Ajay
> > > > >

From: James Nurthen
Date: Wed, Dec 18 2019 12:15PM
Subject: Re: Sliders with two thumbs on mobile
← Previous message | Next message →

If you want to make a slider work on iOS you need to use a native HTML
input type=range.
Paul has one here http://pauljadam.com/demos/multithumb-slider.html

On Wed, Dec 18, 2019 at 10:54 AM glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> Have you already looked at "Slider (Multi-Thumb)" in the authoring
> practice?
>
> https://www.w3.org/TR/wai-aria-practices/#slidertwothumb
>
> https://www.w3.org/TR/wai-aria-practices/examples/slider/multithumb-slider.html
>
> The example works ok with the keyboard and with NVDA but does not work on
> ios. The adjustable value for the slider doesn't respond to flicks up/down
> even when the rotor is set to "adjust value". I don't have an android
> device to test the volume keys.
>
>
> On Tue, Dec 17, 2019 at 8:26 PM Ajay Sharma < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > Hi,
> >
> > We have a slider with two thumbs, through which the minimum or maximum
> > value could be adjusted. Natively on iOS slider is adjusted with single
> > finger up / down flick and on android, by volume keys, but that's the
> case
> > with single thumb sliders, and it does not seem to work in this
> situation.
> >
> > I am looking for some thoughts around the best practices to make it
> > accessible with screenreader on mobile.
> >
> > Thanks!
> > Ajay
> > > > > > > > > >
> > > > >

From: Ajay Sharma
Date: Wed, Dec 18 2019 1:42PM
Subject: Re: Sliders with two thumbs on mobile
← Previous message | No next message

Thanks so much Paul, it was very helpful and very nicely explained.
Hope to see some thing like this in authoring practice doc soon.

Cheers!
Ajay

On 12/18/19, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:
> If you want to make a slider work on iOS you need to use a native HTML
> input type=range.
> Paul has one here http://pauljadam.com/demos/multithumb-slider.html
>
> On Wed, Dec 18, 2019 at 10:54 AM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Have you already looked at "Slider (Multi-Thumb)" in the authoring
>> practice?
>>
>> https://www.w3.org/TR/wai-aria-practices/#slidertwothumb
>>
>> https://www.w3.org/TR/wai-aria-practices/examples/slider/multithumb-slider.html
>>
>> The example works ok with the keyboard and with NVDA but does not work on
>> ios. The adjustable value for the slider doesn't respond to flicks
>> up/down
>> even when the rotor is set to "adjust value". I don't have an android
>> device to test the volume keys.
>>
>>
>> On Tue, Dec 17, 2019 at 8:26 PM Ajay Sharma < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>> > Hi,
>> >
>> > We have a slider with two thumbs, through which the minimum or maximum
>> > value could be adjusted. Natively on iOS slider is adjusted with single
>> > finger up / down flick and on android, by volume keys, but that's the
>> case
>> > with single thumb sliders, and it does not seem to work in this
>> situation.
>> >
>> > I am looking for some thoughts around the best practices to make it
>> > accessible with screenreader on mobile.
>> >
>> > Thanks!
>> > Ajay
>> > >> > >> > >> > >> >
>> >> >> >> >>
> > > > >