Приучим выпадающее меню реагировать на клавиатуру
Версия для печатиВыпадающее меню, также известное как всплывающее меню или DHTML-меню, не числится в списке тех полезных функций, которые я бы использовал на своём сайте. Похоже, что многим такого рода меню нравятся, — и это отлично до тех пор, пока меню создаётся с учётом доступности и юзабилити, что в большинстве случаев фактически подразумевает их доступность для клавиатуры.
К сожалению, большинство выпадающих меню, которые я вообще встречал в природе, нельзя было использовать с помощью клавиатуры. Вот пара типичных примеров:
- В меню нет "реальных" ссылок: Подуровни меню можно раскрыть только мышью, а ссылки верхнего уровня в меню не ведут на страницы, где бы находились дочерние ветки меню. Такое усовершенствование выпадающих меню никак не помешало бы людям пользоваться сайтом, его можно рассматривать как полезную функцию для пользователей, которым она необходима.
- Табуляция как всегда остается за бортом: Ссылки подуровней меню не отображаются при перемещении фокуса, но существуют в стеке табуляции, что делает их технически доступными, однако, в действительности создает "чёрную дыру" для пользователей, использующих только клавиатуру. Такой вид меню крайне неудобен в использовании, поскольку нет видимой ответной реакции до тех пор, пока вы не используете мышь.
В следующий раз, когда вы будете создавать выпадающее меню, пожалуйста, постарайтесь избегать описанных проблем.
Статья основана на публикации: "If you must use a dropdown menu, make sure it’s keyboard friendly"