slider/accessibility

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Slider keyboard operation and tab order (default slider)

For the default slider, tab order goes from slider to number input. Arrow keys are used to change the slider value. Shift + Arrow changes the slider value by a larger increment (such as by 10 instead of 1). Users can also directly enter a value in the input field.

Slider input and position synchronization

The input value and slider position are kept in sync. An update to either the input field or the slider handle causes the other to update automatically.

Range slider keyboard operation and tab order

For the range slider, tab order goes from the first number input, to the two handles in turn, and then to the second number input. The handle keyboard operation is the same as with the default slider. Users can also directly enter numbers into the minimum and maximum value inputs.

Range slider labeling strategy

The slider label describes what kind of values will be selected from the range slider. The minimum and maximum values are labeled with placeholder text of 'min' and 'max' due to space constraints.

Step value configuration for slider

The step value determines the change increment when moving the slider, either by pointer or keyboard. A value of '1' is recommended.

Step multiplier configuration for slider

The stepMultiplier determines the value change when the keyboard is used to alter the slider by pressing Shift + Arrow key. A tenth of the total range is recommended as a value, such as '10' in a 0-100 slider.

Slider error handling for out-of-range values

If an inputted value is outside the allowed range, the slider will auto-correct to the nearest allowed digit. When the inputted value results in an error, the error will display alongside the corresponding text input.

Range slider error handling for logically incorrect values

In the range slider, if the inputted value is not logically correct (for example, if a minimum value is greater than the maximum value), a warning message will be generated that informs the user that a value was autocorrected to the nearest allowed digit.

Carbon slider keyboard support for blind users

Carbon bakes keyboard operation into its slider components, improving the experience of blind users and others who operate via the keyboard. Carbon incorporates many other accessibility considerations built into the component.

Give your agent this brain