#keyboard #accessibility #wcag
Вопрос:
Привет 🙂 Я хотел бы спросить вас о том, как обращаться с элементами, которые составляют список, но которым присвоена роль кнопки и которые помещены в боковую панель ( так что это не меню или выпадающий список). Моя главная проблема заключается в том, как решить, где должны работать СТРЕЛКИ и где вкладка. Кроме того, у меня есть различные типы элементов списка, которые состоят из:
- флажок/ только радиобуттон
- флажок/ радиобуттон со ссылкой на другую панель
- две иконки/ кнопки, которые определили действия и т.д.
Пожалуйста, посмотрите на фотографии и помогите мне, пожалуйста 🙂
РОЗОВЫЙ — «стрелки»
СИНИЙ — клавиша «TAB»
Комментарии:
1. Привет, чтобы помочь, нам нужно увидеть ваш HTML-код.
Ответ №1:
Вряд ли вам следует решать, какой компонент будет использовать клавишу TAB или клавиши со стрелками. Доступность клавиатуры для большого числа компонентов уже определена в методах разработки WAI-ARIA.
Добавление другого поведения может создать проблемы как для зрячих, так и для незрячих пользователей, потому что они уже будут знать, какой ключ использовать в зависимости от компонента, или они будут знать интуитивно из-за стандартных ролей, или они будут знать, когда они больше используют клавиатуру для просмотра.
Список предложений
Список будет работать. Клавиши со стрелками для навигации и клавиша ввода для выполнения действия.
Список флажков и переключателей
Я бы рекомендовал сохранить флажки и переключатели в соответствии с их поведением клавиатуры по умолчанию. Поскольку ваши обращения больше похожи на список, вы можете преобразовать список флажков и переключателей в списки с одним выбором и несколькими вариантами выбора и использовать флажок и переключатель в качестве значка шрифта или графического изображения для отображения выбора, аналогично тому, как галочка отображается в этом примере списка. При преобразовании в поле со списком вы будете соответствовать требованиям к клавишам со стрелками.
Список выбранных Фруктов
Есть некоторые проблемы с требуемым поведением клавиатуры: как пользователь узнает, нужно ли вводить стрелку влево или стрелку вправо, подумайте о незрячих пользователях.
Название фруктов и кнопка значка «Я»
В случае необходимости, если вы хотите, чтобы название фрукта и кнопка со значком i открывали панель, предложите НЕ использовать кнопку со стрелкой вправо от значка i и использовать только клавишу Enter для открытия панели. Может быть, вам вообще не нужна кнопка значка «я».
Кнопка удаления значка
Предложите использовать клавишу DEL для удаления элемента
Вывод
- Снимите кнопку со значком «я». Если вы не можете просто сохранить его как графический элемент без каких-либо событий
- Используйте клавишу ввода, чтобы открыть панель
- Используйте клавишу DEL, чтобы удалить элемент
- Я думаю, что весь список затем превратится в список, доступный для навигации с помощью клавиш со стрелками и ввода для вызова операции
Список овощей
Ни Аккордеон, ни Вложенный список здесь не работают, потому что вам нужно выполнить два действия: сделать выбор, Развернуть и свернуть. Я не пробовал TreeView, но вы можете проверить.