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

Rating slider is not a good pattern #2501

Closed
JAWS-test opened this issue Oct 6, 2022 · 6 comments · Fixed by #2831
Closed

Rating slider is not a good pattern #2501

JAWS-test opened this issue Oct 6, 2022 · 6 comments · Fixed by #2831
Assignees
Labels
enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern Feedback Issue raised by or for collecting input from people outside APG task force

Comments

@JAWS-test
Copy link

JAWS-test commented Oct 6, 2022

In my opinion, the rating slider is not a pattern that we should recommend:

  • if my blind colleague tells me that he operates the slider and I don't see any slider on the page, then it is confusing
  • with the mouse I do not realize that I can select half values. If I click in the right half of a star, I won't notice that I can also click in the left half and give a different rating.
  • since the slider is not visually recognizable as a slider, it is operated with the mouse by clicking rather than moving. On click, it is difficult to set the slider to the 0 value if I have previously clicked on a star. I can set the 0 value with the mouse by click only if I click just to the left of the left star. But this is not noticeable. Mouse users will assume that after activating a star no 0-value can be set.
  • Currently, it seems unclear whether or not the rating stars must meet the WCAG requirement for target size (see 2.5.8: Are all slider variants excluded or only sliders that look and are operated like sliders  wcag#2713). If yes, then they do not fulfill it
@JAWS-test
Copy link
Author

HTML specification says:

[The slider element] represents a control for setting the element's value to a string representing a number, but with the caveat that the exact value is not important, letting UAs provide a simpler interface than they do for the Number state.

Therefore a slider for exact values like in the rating example would be wrong

@a11ydoer a11ydoer assigned a11ydoer and jongund and unassigned a11ydoer Oct 11, 2022
@jongund
Copy link
Contributor

jongund commented Oct 11, 2022

I agree that allowing half stars has user interface issues and should be avoided, but some people like building them, so we should provide a means to help them understand how to make them accessible.

Examples:

@JAWS-test
Copy link
Author

@jongund I don't understand your argument, because if a pattern is not accessible, then it should not be used, whether someone wants it or not. I have concerns about the accessibility and usability of the pattern and think it should be rebuilt or removed. Rebuilt would mean that the click areas are large enough and that I have an visual indicator that

  • half stars can be selected
  • the value 0 can be chosen

@css-meeting-bot
Copy link
Member

The ARIA Authoring Practices (APG) Task Force just discussed Rating slider issue.

The full IRC log of that discussion <Matt_King> TOPIC: Rating slider issue
<Matt_King> github: https://github.com//issues/2501
<jongund> MK: There is a criticism that slider should not be used for ratings
<jongund> JG: The issue is a disconnect between seeing something that looks like a slider and have a slider control
<jongund> JN: What should it be?
<jongund> MK: We all have opinions, use the role that looks like the thing
<jongund> JN: There is not a rating thing
<jongund> MK: Since there is not a rating role
<jongund> JN: We should not having something that has half stars, if you want more there should be more stars
<jongund> MK: JG where dod you find this?
<jongund> JG: I have found one, they are not common
<jongund> JN: I have not seen this
<jongund> MK: Whether it supports or doesn't support half stars
<jongund> MK: The half stars is the issue
<jongund> JN: I agree
<jongund> MK: We agree that half stars doesn't change whether slider is an appropriate role
<jongund> MK: The next bullit is more relavent about no rail for drag
<jongund> JN: I have to go
<jongund> MK: Top of the hour
<jongund> JG: It seems like we should get rid of the half stars
<jongund> MK: The WCAG point is drag
<jongund> MK: Since it is not obvious that it is draggable
<jongund> MK: That and the fact that setting it to zero is not obvious, they might be ligitament
<jongund> MK: I wondering a you can perceive whether you can drag, maybe there should ne something you can drag
<jongund> JG: Are we creating an example that will not be used in real life.
<jongund> MK: What are we demonstrating with this exampel that we are not doing with other examples
<jongund> JG: APG should be provding more clarity than questions
<jongund> rrsagent, draft minutes
<RRSAgent> I have made the request to generate https://www.w3.org/2022/11/01-aria-apg-minutes.html jongund

@jongund
Copy link
Contributor

jongund commented Jan 3, 2023

@JAWS-test
We discussed the example at a meting last month and agreed that it was not a good example in its current state. We would like to have a rating example using the slider pattern, since we still feel that additional keystrokes for a larger number of rating options is useful for more efficiently selecting values.

The idea for changing the example is to change the 5 stars to 10 circles, mimicking bubble forms.

We would also add information on why the slider pattern maybe useful over the radio button pattern when the number of options is greater than some number N.

What do you think of this proposal?

@JAWS-test
Copy link
Author

@jongund Yes, that sounds good. Thanks for the planned improvements

@mcking65 mcking65 added enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern Feedback Issue raised by or for collecting input from people outside APG task force labels Jan 16, 2023
@mcking65 mcking65 added this to the H1/2023 Content Updates milestone Jan 16, 2023
mcking65 added a commit that referenced this issue Dec 18, 2023
… scale (pull #2831)

Resolves issue #2501 by modifying the rating slider example as follows:
* Changes it to a 10-point scale from a 5-star scale that had half star ratings.
* Changes the visual design to better represent common 10-point satisfaction sliders.
* Improves the high contrast support.
* Adds documentation that explains why the slider pattern is appropriate for this use case.

---------

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
Co-authored-by: Matt King <a11yThinker@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern Feedback Issue raised by or for collecting input from people outside APG task force
Development

Successfully merging a pull request may close this issue.

5 participants