Keyboard navigation

Некоторым людям (особенно с двигательными расстройствами) сложно пользоваться мышью для просмотра веб-страниц. Вместо мыши они используют предоставляемую браузерами клавиатурную навигацию при помощи клавиши Tab. Добавляя на страницу JavaScript, нужно подумать об этих людях и предусмотреть навигацию с помощью клавиатуры.

По-хорошему, для каждого обработчика действия мышью должен быть соответствующий обработчик для клавиатуры. Например, если есть обработчик события onclick, по идее, нужен и обработчик для onkeydown.

Код на jQuery:

$("#test").click(function () {
    doSomething();
});
$("#test").keydown(function (event) {
    // Allow the Enter key to activate that element
    return event.keyCode != 13 || doSomething();
});

Далее, хорошо бы прописать стили для псевдокласса :focus. Хотя бы такие же, как и для :hover.

#test:hover,
#test:focus {color: #cc0000;}

Чтобы также ховерилось и фокусировалось в IE, нужно навесить обработчики для событий onmouseover/onfocus и onmouseout/onblur в которых, соответственно, нужно добавлять и убирать какой-нибудь класс.

Все круто, но с помощью таба можно пройтись только по ссылкам и элементам форм. Другие элементы по умолчанию не получают фокус. Что делать, если активный элемент, на который мы навесили onclick и onkeydown, не ссылка, а <span>?

Для этого существует атрибут tabindex.

tabindex="0" — разрешает элементу получать фокус в порядке в котором он идет в документе.

tabindex="5" — положительное значение позволяет изменить порядок получения фокуса элементом при навигации табом.

tabindex="-1" — отрицательное значение исключает элемент из навигации табом.

Проверил, работает в IE и Firefox. Опера и Сафари, к сожалению, вообще пока не поддерживают навигацию табом.

Пример клавиатурной навигации: ездилка на сайте вакансий Евросети.

P. S. Кстати, а знаете ли вы, что Shift + Tab перемещает фокус в обратном порядке?