Навигация с клавиатуры в JavaScript

Как сделать для JavaScript-виджетов на основе span или div возможность навигации с клавиатуры.

Обзор

Веб-приложения часто используют JavaScript, чтобы имитировать работу различных элементов, перешедших в веб с десктопных приложений: динамические меню, закладки, нестандартные элементы форм. Все эти элементы можно назвать виджетами. В вёрстке виджеты обычно состоят из набора HTML-элементов <div> и <span>, которые по умолчанию не предоставляют возможности работать с ними, используя клавиатуру. В данной статье описывается техника, позволяющая сделать JS-виджеты управляемыми с клавиатуры.

Использование tabindex

Атрибут tabindex был представлен в спецификации HTML 4. Он позволяет задать порядок, в котором элементы будут получать фокус при навигации с клавиатуры. Текущая реализация, описанная в HTML 5 draft specs, довольно сильно отличается от первоначальной. Все распространённые браузеры теперь придерживаются новой спецификации.

В данной таблице описано поведение элементов в зависимости от значения атрибута tabindex:

Простые контролы

Чтобы сделать простой виджет доступным через клавишу Tab, задайте tabindex="0" на HTML элементах <div> или <span>, из которых он состоит. Ниже представлен пример эмулирования чекбоксов. Вместо элементов input в примере используется <span>.

Пример 1: Простой виджет, эмулирующий работу чекбосов путем смены изображений. Виджет использует tabindex, чтобы обеспечить доступ с клавиатуры.

<!-- Без атрибута tabindex, элементы <span> не смогут принимать фокус с клавиатуры -->
<div>
    <span role="checkbox" aria-checked="true" tabindex="0">
        <img src="checked.gif" role="presentation" alt="" />
        Добавить декоративную корзину с фруктами
    </span>
</div>
<div>
    <span role="checkbox" aria-checked="true" tabindex="0">
        <img src="checked.gif" role="presentation" alt="" />
        Добавить поющую телеграмму
    </span>
</div>
<div>
    <span role="checkbox" aria-checked="false" tabindex="0">
        <img src="unchecked.gif" role="presentation" alt="" />
        С предоплатой
    </span>
</div>

Сгруппированные контролы

Безусловно есть необходимость создания более сложных виджетов. В качестве примеров можно привести меню, панели табов, различные динамические таблицы, представления для информации, имеющей древовидную структуру. Для таких контролов родительский элемент должен иметь атрибут tabindex="0". В таком случае он сможет попасть в фокус с клавиатуры. Все дочерние элменты (пункты меню, отдельные табы, ячейки, строки) должны иметь tabindex="-1", чтобы не попадать в фокус при нажатии tab. Пользователи должны иметь возможность путешествовать по дочерним элементам при помощи стрелочек на клавиатуре. (Более полное описания того, как должен быть реализован доступ с клавиатуры для часто встречаемых виджетов, смотрите на DHTML Style Guide.)

Ниже приведен пример, который демонстрирует использование этой техники для реализации вложенного меню. После того, как в фокус попадает основной элемент меню (<ul>), разработчик должен программно управлять фокусом, реагируя на нажития клавиш со стрелочками. Для описания техники управления фокусом внутри виджета смотрите раздел «Управление фокусом внутри виджета» ниже в данной статье.

Пример 2: Меню, использующее атрибут tabindex для осуществления доступа с клавиатуры

<ul id="mb1" tabindex="0">
  <li id="mb1_menu1" tabindex="-1"> Шрифт
    <ul id="fontMenu" title="Шрифт" tabindex="-1">
      <li id="sans-serif" tabindex="-1">Sans-serif</li>
      <li id="serif" tabindex="-1">Serif</li>
      <li id="monospace" tabindex="-1">Monospace</li>
      <li id="fantasy" tabindex="-1">Fantasy</li>
    </ul>
  </li>
  <li id="mb1_menu2" tabindex="-1"> Стиль
    <ul id="styleMenu" title="Стиль" tabindex="-1">
      <li id="italic" tabindex="-1">Наклонный</li>
      <li id="bold" tabindex="-1">Жирный</li>
      <li id="underline" tabindex="-1">Подчеркнутый</li>
    </ul>
  </li>
  <li id="mb1_menu3" tabindex="-1"> Выравнивание
    <ul id="justificationMenu" title="Выравнивание" tabindex="-1">
      <li id="left" tabindex="-1">Слева</li>
      <li id="center" tabindex="-1">По центру</li>
      <li id="right" tabindex="-1">Справа</li>
      <li id="justify" tabindex="-1">По ширине</li>
    </ul>
  </li>
</ul>

Неактивные (disabled) контролы

Когда элемент управления становится неактивным, он должен не попадать в фокус при нажатии на tab, что обеспечивается выставлением у элемента атрибута tabindex="-1". Обратите внимание, что неактивные элементы в пределах сгруппированного виджета (такие как, подпункты меню ) должны иметь возможность быть выбранными при помощи стрелочек на клавиатуре.

Управление фокусом внутри виджета

Когда пользователь уходит с виджета, а потом возвращается обратно, фокус должен вернутся на определенный элемент, у которого был фокус раньше. Например, на конкретный элемент дерева или ячейку. Есть два варианта, которыми этого можно добиться:

1. Переходящий tabindex: програмное перемещение фокуса
2. aria-activedescendent: управление «виртуальным» фокусом

Техника первая: Переходящий tabindex

Идея данной техники заключается в выставлении атрибута tabindex в нулевое значение для элемента, который последним находился в фокусе. При этом если пользователь уйдет табом с виджета, а потом вернется обратно, элемент восстановит фокус правильно. Заметьте, что выставляя tabindex в "0", необходимо выставлять tabindex="-1" для предыдущего выделенного элемента. Эта техника требует выставлять фокус элементам программно, реагируя на нажатие клавиш.

Для этого необходимо слушать событие keydown для каждого дочернего элемента виджета. Когда пользователь нажимает на стрелочки на клавиатуре, чтобы переместиться на другой элемент следует:

1. программно прмиенить фокус к другому элементу
2. изменить tabindex элемента в фокусе на 0
3. изменить tabindex предыдущего элемента на -1

По ссылке Вы можете увидеть пример WAI-ARIA tree view, использующий эту технику.

Советы

Используйте element.focus() чтобы задать фокус элементу

Не используйте createEvent(), initEvent() and dispatchEvent() чтобы задать фокус. Событие DOM focus должно использовать только для получения информации о том, что произошел фокус на элемент, оно генерируется системой, когда какой-либо элемент попал в фокус. Оно не должно использовать для того, чтобы задать фокус. Вместо этого используйте element.focus().

Используйте событие onfocus чтобы отслеживать фокус

При разработке не стоит расчитывать, что фокус будет меняться только в следствие манипуляций пользователя с клавиатурой и мышью. Вспомогательные программы, такие как screen readers могут задавать фокус элементам. Отслеживайте события onfocus и onblur, вместо событий мыши и клавиатуры.

onfocus и onblur могут быть использованы с любыми елементами. Сейчас в стандартах не описано метода для получения элемента, находящегося в фокусе. Поэтому если вам потребуется отслеживать элемент с фокусом, его надо будет запоминать в переменную.

Техника вторая: aria-activedescendant

This technique involves binding a single event handler to the container widget and using the aria-activedescendent to track a "virtual" focus. (For more information about ARIA, see this overview of accessible web applications and widgets.)

The aria-activedescendant property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this ARIA radiogroup example for a direct illustration of how this works.

Tips

scrollIntoView

Note that the use of this pattern requires the author to ensure that the current focused widget is scrolled into view. You should be able to use the element.scrollIntoView() function, but we recommend confirming this works for you in your target browsers using the quirksmode test.

Issues

• quirksmode reports problems in Opera, and Konqueror
• Firefox 3.0.1 introduced bug

Рекомендации

Используйте onkeydown для отлова событий вместо onkeypress

В IE событие keypress срабатывает только для буквенно-цифровых клавиш. Используйте onkeydown вместо этого.

Ensure that keyboard and mouse produce the same experience

To ensure that the user experience is consistent regardless of input device, keyboard and mouse event handlers should share code where appropriate. For example, the code that updates the tabindex or the styling when users navigate using the arrow keys should also be used by mouse click handlers to produce the same changes.

Ensure that the keyboard can be used to activate element

To ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. For example, to ensure that the Enter key will activate an element, if you have an onclick="doSomething()", you should bind doSomething() to the key down event as well: onkeydown="return event.keyCode != 13 || doSomething();".

Don't use :focus to style the focus (if you care about IE 7 and earlier)

IE 7 and earlier versions do not support the :focus pseudo-selector; do not use it to style focus. Instead, set the style in an onfocus event handler, for example by adding a CSS style name to the class attribute.

Always draw the focus for tabindex="-1" items and elements that receive focus programatically

IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like this.style.backgroundColor = "gray"; or add a dotted border via this.style.border = "1px dotted invert". In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).

Prevent used key events from performing browser functions

If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns false, the event will not be propagated beyond your handler.

For example:

<span tabindex="-1" onkeydown="return handleKeyDown();">

If handleKeyDown() returns false, the event will be consumed, preventing the browser from performing any action based on the keystroke.

Don't rely on consistent behavior for key repeat, at this point

Unfortunately onkeydown may or may not repeat depending on what browser and OS you're running on.