Ползунки и доступность: удобство использования слайдеров для пользователей с ограниченными возможностями
Мне было интересно, будет ли использование слайдеров для людей с ограниченными возможностями усложнять выбор значений. Как трудно перетаскивать их? Насколько легко им видеть изменения значений при перемещении другого элемента или выбрать конкретное значение?
2 ответа
Слайдеры - это усовершенствование, а не замена ввода данных. У любого, у кого есть трудности с двигателем, могут возникнуть проблемы со слайдерами, поэтому вы хотите, чтобы вводимые значения также можно вводить вручную с клавиатуры. Это требует, чтобы вы сделали поле значения видимым и сфокусированным.
По умолчанию для разметки должно быть поле ввода:
Value:
[50% ]
Затем через JS вы улучшите это, добавив ползунок, который, в свою очередь, обновит текстовое поле (и, наоборот, если вы вручную обновите текстовое поле, оно должно обновить слайдер).
Value:
>========||========< [50% ]
Обратите внимание, что HTML5 теперь включает в себя тип ввода range, который будет отображаться как слайдер. Однако я не совсем уверен в доступности этого конкретного материала. Я попытался подтянуть ссылку для него, но я не нахожу ссылок на ввод range, который специально определяет доступность (если кто-либо имеет ссылку, пожалуйста, поделитесь!)
Нет плохих или хороших компонентов, это зависит от реализации. В общем слайдер не очень доступен компонент пользовательского интерфейса, но вы можете сделать его лучше.
Когда я думаю о доступности ползунка, я начинаю с WAI-ARIA , которая указывает, как повысить доступность компонентов пользовательского интерфейса, разработанных с помощью Ajax, HTML, JavaScript и связанных с ними технологий. WAI-ARIA 1.0 Авторская практика говорит:
Ползунок - это пользовательский ввод, в котором пользователь выбирает значение из заданного диапазона. Слайдеры обычно имеют такую кнопку, что при перемещении изменяет текущее значение в текущем диапазоне ползунка. Кнопка должна быть доступной для клавиатуры (настраивается и работает). Обычно можно добавлять или вычитать текущее значение с помощью клавиш направления, таких как клавиши со стрелками.
- → (Стрелка вправо) и ↑ (Стрелка вверх) увеличивают значение ползунка.
- ← (стрелка влево) и ↓ (стрелка вниз) уменьшают значение ползунка.
- Home и End перейти к минимальному и максимальному значениям ползунка.
- Tab в ползунок и из него.
- Page Up и Page Down необязательно увеличивать или уменьшать ползунок на заданную величину.
Итак, моя рекомендация - если вы думаете, что вам нужен слайдер, используйте его, но сделайте его доступным. И, конечно, тест-тест.