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

Question

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.

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?

Answer 1

You are better leaving it as it is.

You can indeed hide one of the inputs be using tabindex="-1" and aria-hidden="true" (and you do need both as screen readers have different ways of navigating form items and can still sometimes access inputs with tabindex="-1") but that brings other issues.

Although you fixed it for screen reader users you completely broke usability for people with mobility issues (for example).

You see non screen reader users who rely on the keyboard for navigation now have an input that can not be reached via keyboard, this is worse than screen reader users and keyboard users having additional tab stops.

The best you could probably do is add aria-hidden="true" to the slider, but that will get ignored by most screen readers.

If you can't remove the item (as you already pointed out that is the correct course of action) then leave it be.

Additional thoughts

I know the above is only an example but as it only has one label I assume you are using aria-labelledby or similar to create the association to the second control?

Two controls with one label is not a good idea because only the first control that is associated with that label will actually get the association (and the benefits such as clicking the label to activate the control - a must for people with dexterity / accuracy issues.)

Yet again just something to explore as without seeing your code it is hard to guide on that.

Answer 2

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.