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

• 02, 15, 2013
•  bullgare
•  HTML and CSS, javascript
• No Comments.

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

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

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

<div id="my-dialog" role="dialog" tabindex="-1" aria-labelledby="dialog-title"> 
<h3 id="dialog-title">New Message</h3> 
<-- Your dialog code here --> 
</div>

var div = document.getElementById("my-dialog");
div.tabIndex = -1; // если не выставлен в вёрстке
div.focus();

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

Для этого:

document.addEventListener("focus", function(event) {

    var dialog = document.getElementById("my-dialog");

    if (dialogOpen && !dialog.contains(event.target)) {
        event.stopPropagation();
        dialog.focus();
    }

}, true);

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

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

var lastFocus = document.activeElement,
    dialog = document.getElementById("my-dialog");

dialog.className = "show";
dialog.focus();

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

lastFocus.focus()

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

document.addEventListener("keydown", function(event) {
    if (dialogOpen && event.keyCode == 27) {
        // close the dialog
    }
}, true);

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