Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider ARIA properties #171

Closed
aitchiss opened this issue Feb 1, 2022 · 0 comments · Fixed by #177
Closed

Slider ARIA properties #171

aitchiss opened this issue Feb 1, 2022 · 0 comments · Fixed by #177
Labels
good first issue Good for newcomers

Comments

@aitchiss
Copy link
Contributor

aitchiss commented Feb 1, 2022

Really love this library, especially all the accessibility considerations built in! One thing I've noticed in implementing it though is an error from accessibility validators for a missing aria-valuenow property on both the Color and Hue sliders.

I had an explore of the MDN docs for the two properties aria-valuetext (currently used on these sliders) and aria-valuenow:

The aria-valuetext attribute is used with the aria-valuenow attribute, not instead of it, unless that value is not known.

aria-valuetext is only needed when the numeric value of aria-valuenow is not meaningful

The WAI-ARIA docs for sliders also confirm aria-valuenow is required:

Each slider element has the aria-valuenow property set to a decimal value representing the current value of the slider.

It seems that although aria-valuetext is what actually forms the description announced to screen reader users, the aria-valuenow is still required.

Proposed change

In the case of the Hue component, the valuetext is already number, so I'm hoping it would be simple enough to change aria-valuetext to aria-valuenow, since the additional text description isn't needed.

It's less clear to me whether there's a corresponding numeric value that could be used for the Color slider - what do you think?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants