Навигация для слепых
Начал верстать сайт для людей с ограниченными возможностями.
Как сделать что бы навигация сайта (виде модального окна) открывалась и закрывались по нажатию клаши пробел. С сразу был фокус на элементах навигации. |
Если вы делаете навигацию для слепых, то должны следовать всем правилам интерфейса работы с клавиатуры. Всякие переходы между фокусируемыми элементами по tab shift-tab, выполнение действий по enter и space...
Любое действие должно выполняться по нажатию кнопки. Кнопка (<button>, <input type=button>) автоматически реагирует на нажатие пробела или энтера. Если используется другой элемент, то на него придется навесить все необходимые обработчики событий клавиатуры. Кроме этого (если используется программа чтения с экрана) необходимо правильно устанавливать атрибуты aria- и role. Тут https://www.w3.org/TR/wai-aria-practices/ Есть различные примеры как рекомендуется делать интерфейс для людей с ограниченными возможностями (меню, вкладки, диалоги...) Цитата:
Модальное окно должно полностью перехватывать все действия пользователя. И единственный способ сделать что то вне окна (даже скроллинг страницы) - это закрыть окно. Это тоже должно выполнятся по кнопке. |
Цитата:
|
Модальное окно должно размещаться не в body, а на специальной подложке (div) размером с экран прозрачной или полупрозрачной. Эта подложка должна перехватывать и задерживать все события клавиатуры и мыши. которые не обрабатывает модальное окно (event.stopPropagation())
При открытии модального окна фокус должен устанавливаться на какой то элемент в нем. В самом модальном окне должен быть список всех фокусируемых элементов и обработчик событий на нажатие клавиш tab и shift-tab, что бы с первого фокусируемого элемента передавать фокус на последний по shift-tab (а не вне окна), а с последнего на первый по tab. Пример с обработчиками и необходимыми aria- https://www.w3.org/TR/wai-aria-pract...al/dialog.html |
voraa,
Спасибо так чуть яснее куда двигаться. |
Часовой пояс GMT +3, время: 03:28. |