Slider and Input for same Value - Should both be tab-selectable?



  • I'm working on a form where users are able to select a numeric value both with a range slider as well as a numeric input. (See mockup below)

    Both inputs have to stay in the form which is a design decision that I don't have any influence over.

    A mockup of a form containing both a numeric input and a slider for the same value

    Currently both the slider and the numeric input are tab-selectable, which in my opinion, is redundant because keyboard only users won't get anything from being able to use the slider as well.

    My question is whether or not it makes sense from an accessibility standpoint to leave the behavior as is or rather to change it.

    Another important question is if I decide to give the slider a tabindex of -1, should I also add aria-hidden="true" to it?



  • How many users do you think will be even aware of tab to focus, and how many of those do you reckon actually use it? And how many users will use a touch interface for your application? Which of course doesn't afford tab control.

    What value domain does the input describe? Are you actually asking how many movies? Then what is the benefit of using a slider over just the input? As you mention accessibility concerns, sliders are notoriously bad for people with reduced motor control, and should be avoided for precision input.

    Also, your buttons are aligned in such a way that some users may perceive a relation between the input and the OK button. You may want to align the button group left or right, placing the buttons closer together and adding some distance between the button group and the other controls.

    UPDATE

    I understand your predicament, as you are unable to weigh-in on the overall design. It's a real shame you cannot share the ultimate goal of the interface, as the quality of advise will depend heavily on this.

    If you present both controls, then you be wise to disable the slider for your sight-disabled users. Using aria-hidden="true" would be the right thing to do.

    Setting the tabindex="-1" would not be required for your assisted users, but it will provide a better experience for your power users. The focus state will depend heavily on a per-browser basis. Even when specifically and correctly designed, this will not be a highly trained visual cue, even for power users. This goes especially if most of the rest of your application is keyboard-controllable.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2