Accessibility / screen reader fallback state

[amfriedman]

Hi folks, I couldn't find any information on how this widget degrades for screen readers for persons with disabilities, or when Javascript is not available. Does the widget handle this gracefully? I imagine it should fallback to two select boxes or something.

[jooyoungseo]

I was also about to file the issue on accessibility for screen readers.

I, myself, am a blind developer and screen reader user.

All the slider bars presented in this basic demo are completely inaccessible.

First, I cannot move around each slider bar using tab key. For some reasons, tabindex implemented in ion.rangeSlider does not seem to work.

Second, I cannot manipulate the slider bars via keyboard (arrow keys). I am not sure about whether sighted people would see any change; however, not for screen readers. data-keyboard option should be set to true by default, but I do not see any keyboard improvement from screen-reader accessibility standpoint.

Last but not least, the slider bar element is recognized as a read-only text edit box for screen readers. Please fix this by consulting with this technical document.

[IonDen]

Hi guys. Thank you for mentioning this problem! I'm aware and 3.x version of the slider will support this.

I'm not sure if I will have time to work on this functionality for 2.x version, but I will think if I will be able to allocate some time for it.

[jooyoungseo]

Thanks very much for your hard work @IonDen! It would be so nice if this issue could be addressed at your earliest convenience because the impact of fixing this issue will be far reaching. Many blind people, including me, have suffered from the inaccessible ion.rangeSlider widget on various web pages even at this moment.

[IonDen]

@jooyoungseo thank you for pointing this out! I will try to give it bigger priority. Meanwhile, could you please describe how do you think the range slider should work in that case? Should it be a fallback to 2 inputs or still moving handles?

[jooyoungseo]

Thanks very much for taking your valuable time to consider this issue as a higher priority, @IonDen.

Please correct me if I am wrong, but are you considering <noscript> as a means of fallback?

Providing an accessible alternative within the

Retreived from Web AIM.

It would be greatly appreciated if you could make ion.rangeSlider like this example.

[ellvix]

@jooyoungseo Nice example. I also found this one.

@IonDen From what I can see, it should all work as is if the proper attributes are added to the control buttons. Something like this:

<span class="irs-handle from" style="left: 19.3724%;" aria-valuemin="-1000" aria-valuemax="1000" aria-valuenow="25" aria-labelledby="id-of-irs-single" role="slider" tabindex="0" aria-controls="id-of-input"> <i></i><i></i><i></i> </span>

This should all work perfectly including multiple sliders on the same bar. There will be some decent JavaScript needed to update the various values as the slider updates, but that shouldn't be too bad.

Another change which would help quality of life for screen reader users would be to add aria-hidden="true" for everything else (like .irs-min, .irs-max, .irs-from, .irs-to, etc). Currently a screen reader reads all the numbers visually there with no context. I think they could all be hidden, right? the aria min / max would give that information?

[ashleyasmus]

Any progress on this issue? I'm developing an application that may use ion range sliders. One of the target audiences is people with disabilities. My current workaround is making aria-hidden = "true" for all irs-... elements, and then adding text entry boxes.

[sumit-nknews]

I also needed to fix this inorder to make my website accessible through keyboard. All other components are working except this double range-slider. Please update the progress.