Специальные возможности клавиатуры ( WCAG) на панелях со списком элементов, которым назначена роль кнопки

#keyboard #accessibility #wcag

Вопрос:

Привет 🙂 Я хотел бы спросить вас о том, как обращаться с элементами, которые составляют список, но которым присвоена роль кнопки и которые помещены в боковую панель ( так что это не меню или выпадающий список). Моя главная проблема заключается в том, как решить, где должны работать СТРЕЛКИ и где вкладка. Кроме того, у меня есть различные типы элементов списка, которые состоят из:

  • флажок/ только радиобуттон
  • флажок/ радиобуттон со ссылкой на другую панель
  • две иконки/ кнопки, которые определили действия и т.д.

Пожалуйста, посмотрите на фотографии и помогите мне, пожалуйста 🙂

РОЗОВЫЙ — «стрелки»

СИНИЙ — клавиша «TAB»

введите описание изображения здесь
введите описание изображения здесь
введите описание изображения здесь
введите описание изображения здесь

Комментарии:

1. Привет, чтобы помочь, нам нужно увидеть ваш HTML-код.

Ответ №1:

Вряд ли вам следует решать, какой компонент будет использовать клавишу TAB или клавиши со стрелками. Доступность клавиатуры для большого числа компонентов уже определена в методах разработки WAI-ARIA.

Добавление другого поведения может создать проблемы как для зрячих, так и для незрячих пользователей, потому что они уже будут знать, какой ключ использовать в зависимости от компонента, или они будут знать интуитивно из-за стандартных ролей, или они будут знать, когда они больше используют клавиатуру для просмотра.

Список предложений

Список будет работать. Клавиши со стрелками для навигации и клавиша ввода для выполнения действия.

Список флажков и переключателей

Я бы рекомендовал сохранить флажки и переключатели в соответствии с их поведением клавиатуры по умолчанию. Поскольку ваши обращения больше похожи на список, вы можете преобразовать список флажков и переключателей в списки с одним выбором и несколькими вариантами выбора и использовать флажок и переключатель в качестве значка шрифта или графического изображения для отображения выбора, аналогично тому, как галочка отображается в этом примере списка. При преобразовании в поле со списком вы будете соответствовать требованиям к клавишам со стрелками.

Список выбранных Фруктов

Есть некоторые проблемы с требуемым поведением клавиатуры: как пользователь узнает, нужно ли вводить стрелку влево или стрелку вправо, подумайте о незрячих пользователях.

Название фруктов и кнопка значка «Я»

В случае необходимости, если вы хотите, чтобы название фрукта и кнопка со значком i открывали панель, предложите НЕ использовать кнопку со стрелкой вправо от значка i и использовать только клавишу Enter для открытия панели. Может быть, вам вообще не нужна кнопка значка «я».

Кнопка удаления значка

Предложите использовать клавишу DEL для удаления элемента

Вывод

  • Снимите кнопку со значком «я». Если вы не можете просто сохранить его как графический элемент без каких-либо событий
  • Используйте клавишу ввода, чтобы открыть панель
  • Используйте клавишу DEL, чтобы удалить элемент
  • Я думаю, что весь список затем превратится в список, доступный для навигации с помощью клавиш со стрелками и ввода для вызова операции

Список овощей

Ни Аккордеон, ни Вложенный список здесь не работают, потому что вам нужно выполнить два действия: сделать выбор, Развернуть и свернуть. Я не пробовал TreeView, но вы можете проверить.