Навигация для слепых

[Сергей Ракипов]

Начал верстать сайт для людей с ограниченными возможностями.
Как сделать что бы навигация сайта (виде модального окна) открывалась и закрывались по нажатию клаши пробел.
С сразу был фокус на элементах навигации.

[voraa]

Если вы делаете навигацию для слепых, то должны следовать всем правилам интерфейса работы с клавиатуры. Всякие переходы между фокусируемыми элементами по tab shift-tab, выполнение действий по enter и space...
Любое действие должно выполняться по нажатию кнопки. Кнопка (<button>, <input type=button>) автоматически реагирует на нажатие пробела или энтера.
Если используется другой элемент, то на него придется навесить все необходимые обработчики событий клавиатуры.
Кроме этого (если используется программа чтения с экрана) необходимо правильно устанавливать атрибуты aria- и role.
Тут
https://www.w3.org/TR/wai-aria-practices/
Есть различные примеры как рекомендуется делать интерфейс для людей с ограниченными возможностями (меню, вкладки, диалоги...)

виде модального окна

Окно дейсвительно модальное?
Модальное окно должно полностью перехватывать все действия пользователя. И единственный способ сделать что то вне окна (даже скроллинг страницы) - это закрыть окно. Это тоже должно выполнятся по кнопке.

[Сергей Ракипов]

Окно дейсвительно модальное?

Пока задумка такая, сделать навигацию в модальном окне.

[voraa]

Модальное окно должно размещаться не в body, а на специальной подложке (div) размером с экран прозрачной или полупрозрачной. Эта подложка должна перехватывать и задерживать все события клавиатуры и мыши. которые не обрабатывает модальное окно (event.stopPropagation())
При открытии модального окна фокус должен устанавливаться на какой то элемент в нем. В самом модальном окне должен быть список всех фокусируемых элементов и обработчик событий на нажатие клавиш tab и shift-tab, что бы с первого фокусируемого элемента передавать фокус на последний по shift-tab (а не вне окна), а с последнего на первый по tab.
Пример с обработчиками и необходимыми aria-
https://www.w3.org/TR/wai-aria-pract...al/dialog.html

[Сергей Ракипов]

voraa,
Спасибо так чуть яснее куда двигаться.