Диалоговые окна и навигация клавиатурой

Чтобы навигация клавиатурой в дилоговом окне была правильной, нужно сделать несколько вещей.

Установить правильный фокус при открытии

Для этого нужно установить у нужного div-а tabindex=-1, после этого при открытии окна установить фокус на этот div.

Запретить уводить фокус с элементов вне диалогового окна

Для этого:

Восстановление фокуса после закрытия диалога

При открытии диалога:

При закрытии окна:

Для полноты картины — закрытие по нажатию на «Esc»

Здесь подробнее — http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/ (тут также описано, что такое ARIA, и как сделать диалоговые окна совместимыми с устройствами чтения с экрана).

LEAVE A COMMENT