Price range sliders

Hi all,

[Warning for assistive technology users: some examples that I link to 
below are either not accessible or prone to freeze your screenreader. 
When testing the Backmarket site for example, my NVDA froze for several 
seconds. Be advised!]

I was asked to find out about the accessibility of a price range slider, 
and I’m at a loss for best practices. An example can be found on 
Backmarket for instance [1].

I looked into the <input type=”range”>[2], which seems quite well 
supported among ATs, but it only has one control.

So I suggested the following:
* Provide plain min/max inputs with type="number" inputmode="numeric"
* Make the slider controls focusable (as in the Backmarket example) so 
that a keyboard-only person can use the controls as well as type numbers

But I guess the two slider controls would just be noise for a screen 
reader user (How do I know how to interact with it, etc.). I considered 
relying on aria-hidden to completely hide them from screen readers but 
due to the necessary use of tabindex for keyboard access, the controls 
are still reachable and would make no sense. I tested the hypothesis by 
tinkering on Jquery UI’s price range slider[3] and of course it’s a 
no-go: with NVDA the controls are focusable but say nothing, obviously.

What would be the best course of action, do you think?

Any ideas welcome!

[1] https://www.backmarket.com/refurbished-smartphones.html
[2] 
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
[3] https://jqueryui.com/slider/#range

-- 
Stephane, hailing from La France :)

Received on Friday, 3 September 2021 15:32:40 UTC