search

leongersen / noUiSlider

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
https://refreshless.com/nouislider/
MIT License
5.7k stars 657 forks source link

Chrome Lighthouse - Accessibility: ARIA input fields do not have accessible names #1223

Closed USMortality closed 1 year ago

USMortality commented 2 years ago

Getting this error message when running the lighthouse report within google chrome.

Seems to me that a fix would be fairly easy, e.g.:

Option 1: Add inner text to the element Option 2: Add an aria-label attribute to the element Option 3: Refer to another element using aria-labelledby

Screen Shot 2022-08-27 at 12 57 35 PM
leongersen commented 2 years ago

What option would work for your use case?

We could add an option to provide labels for handles.

For reference: https://www.w3.org/WAI/ARIA/apg/patterns/slider/#wai-aria-roles-states-and-properties-17

USMortality commented 2 years ago

I think it could be as easy as just adding aria-label="Slider">? (Option 2)

bvauchelle commented 1 year ago

Would the handleAttributes option already fit your need by allowing to set an aria-label (or aria-labelledby) of your choice?

leongersen commented 1 year ago

@bvauchelle Yes, that is the correct solution here.

github-actions[bot] commented 1 year ago

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.