noUiSlider How to add aria-label to noUiHandler - TypeScript

How can i add an aria-label attribute to this dynamic div?

image

Asked Oct 13 '21 14:10
avatar akinhwan
akinhwan

6 Answer:

I ended up adding the aria-label attribute via javascript, sorry thanks. in case someone else needs to resolve axe violation for that

1
Answered Sep 20 '19 at 14:49
avatar  of akinhwan
akinhwan

I'm also doing accessibility testing with axe accessibility testing tool and came across this same problem. Like issue opener's screenshot shows, axe reports following problem: https://dequeuniversity.com/rules/axe/3.3/aria-input-field-name

Basically it would be nice if there was an option to give the slider handle "aria-label" attribute. Currently screen readers read out only the "aria-valuetext" when handle is focused, which by itself might be confusing for some users.

Other options could be giving the handle either "id" or "aria-labelledby" attribute, but these would require always having either label or some other element containing description text. MDN examples

This is not that big a deal though, since like akinhwan said the attribute(s) can be added after slider initialization using some JS. Just thought I'd clarify what is asked here :)

1
Answered Oct 03 '19 at 14:58
avatar  of toniheikkala
toniheikkala

I'm open for suggestions on this feature. It could look something like this:

noUiSlider.create(slider, {
    start: [20, 80],
    handleAttributes: [
        { 'aria-label': 'lower' },
        { 'aria-label': 'upper' },
    ],
    range: {
        'min': 0,
        'max': 100
    }
});
1
Answered May 04 '21 at 09:58
avatar  of leongersen
leongersen

@leongersen your solution seems good to me, are you thinking implementing this ?

1
Answered Aug 05 '21 at 10:50
avatar  of dippas
dippas

The handleAttributes option is now available in noUiSlider 15.4.0.

Thank you for contributing, everybody!

1
Answered Aug 14 '21 at 18:44
avatar  of leongersen
leongersen

The handleAttributes option is now available in noUiSlider 15.4.0.

Thank you for contributing, everybody!

Thank you @leongersen, I just wanted to see if i could implement this and possibly open a PR only to find out you already did this. Much appreciated!

1
Answered Aug 23 '21 at 08:45
avatar  of jurajk
jurajk