How to add aria-label to noUiHandler

[akinhwan]

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

[leongersen]

Sorry, what are you asking?

[akinhwan]

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

[lianatech-toni-heikkala]

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 :)

[leongersen]

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
    }
});

[dippas]

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

[leongersen]

The handleAttributes option is now available in noUiSlider 15.4.0.

Thank you for contributing, everybody!

[jurajk]

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!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.