Создание кликабельных и фокусируемых при помощи клавиатуры элементов.

Перевод статьи:  Making elements keyboard focusable and clickable.
Автор:  Roger Johansson.

Как правило, когда вы хотите создать кликабельный элемент веб-страницы с целью привязки его к JavaScript функции, лучшим кандидатом на эту роль являются те элементы, которые собственно и предназначены для взаимодействия с пользователем при помощи клавиатуры. В большинстве случаев кнопка, реализуемая несколькими способами (<input type="button" /> или <button type="button"></button>) — наиболее подходящий для этого элемент, позволяющий активировать необходимую функцию независимо от того что использует для этого пользователь мышь или что-либо другое.

К сожалению, многие (если не подавляющее большинство) веб-разработчиков как раз и не используют корректных, предназначенных для этих целей HTML элементов. Взамен, для их реализации верстальщики применяют те элементы, которые не доступны с клавиатуры и не способны взаимодействовать с ней, такие как <span> , <div> или <li>. Более или менее оправданным в данном случае может быть использование элемента ссылки <a>, так как он способен получать фокус после нажатия соответствующих клавиш клавиатуры, если его href атрибуту присвоено значение (любое, например <a href="#">Click me</a>). Но тогда этот элемент уже не является ссылкой потому, что он не перемещает пользователя в другое место и выполняет функции кнопки.

Так почему же для приведения в действие требуемой функциональности на сайте многие веб-разработчики используют неверный элемент? На мой взгляд, основной причиной является вопрос стилизации или другими словами визуального оформления. Было время, когда браузеры не позволяли в достаточной степени изменять внешний вид элементов кнопок, что и вынудило разработчиков использовать взамен те элементы, которые более легко поддаются стилизации. Уже прошло много лет и сменилось множество версий браузеров с тех пор, когда это было единственным выходом из ситуации (взгляните на примеры возможного оформления кнопок на период 2004 года). На сегодняшний день ситуация значительно улучшилась и все широко использующиеся в данный момент браузеры позволяют в достаточной степени изменять внешний вид кнопок.

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

Что же можно посоветовать в этом случае? Есть два варианта:

  1. Используйте элементы кнопок и применяйте к ним стили для предания им необходимого внешнего вида.
  2. Если же вы все-таки по каким-то причинам не можете или не хотите использовать реальный элемент кнопку, то позаботьтесь о том, чтобы ваша фиктивная кнопка могла иметь фокус и быть активирована без использования мыши.

В обеих случаях, для того чтобы не вводить в заблуждение тех пользователей, которые не используют скрипты, добавляя в DOM структуру документа новые интерактивные элементы с помощью JavaScript, делайте это лишь в том случае, если они будут полезны даже при отключенных пользователем скриптах.

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

  • Назначьте вашему элементу обработчик события click (что при выборе первого варианта само собой разумеется).
  • Включите в него атрибут tabindex="0" для того, чтобы дать элементу возможность получения фокуса и отображения в списке автоматического перемещения фокуса при нажатии клавиши табуляции согласно его положению в дереве DOM.
  • Используйте WAI ARIA атрибут role для того, чтобы средства, использующие технологии обеспечения доступности документа (Assistive technologies) могли определить истинное назначение элемента (в случае использования его в качестве кнопки, атрибуту нужно дать соответствующее значение — role="button").
  • За счет использования обработчика события keydown позаботьтесь о том, чтобы при получении фокуса элемент можно было активировать (если говорить применительно к кнопке, которую ваш элемент имитирует – нажать) с помощью клавиш Enter или Space.
  • Если для создания фиктивной кнопки вы используете элемент ссылку <a>, то необходимо отменить свойственное таким элементам поведение по умолчанию при их активации (для этого можно применить метод event.preventDefault() или использовать в обработчике конструкцию return false).

Ниже приведен пример фрагмента jQuery кода, который может быть использован для вставки в документ элемента <span>, выполняющего функции кнопки:

$('<span>', {
'class': 'button', // Вы можете назначить необходимые стили.
role: 'button', // Сообщаем технологиям доступности, что это кнопка.
tabindex: '0', // Придаем элементу способность получения фокуса с помощью клавиатуры.
click: function() { // После нажатия кнопки выполняем необходимые действия.
alert('You clicked me! ');
},
keydown: function(e) { // Даем возможность нажатия кнопки с помощью клавиатуры.
var code = e.which;
// 13 = Return, 32 = Space
if ((code === 13) || (code === 32)) {
$(this).click();
}
},
html: 'Click me! '
}).appendTo($('#button-container'));

Взгляните на демо страницу, на которой представлены перечисленные ниже способы создания фокусируемых и кликабельных элементов доступных с клавиатуры:

  • Button 1 — элемент <span> с обработчиком события click.
  • Button 2 — элемент <span> с обработчиком события click, а также атрибутами tabindex и role.
  • Button 3 — элемент <span> с обработчиком события click, атрибутами tabindex и role, а также обработчиком событий keydown.
  • Button 4 — элемент <button> с обработчиком события click.

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

  • Button 1: не получает фокус с клавиатуры в любом из существующих браузеров.
  • Button 2: получает фокус при помощи клавиатуры, но лишь в Opera срабатывает нажатие кнопки и то только клавишей Enter, а клавиша Space в этом случае не работает. Программы чтения с экрана, поддерживающие стандарт WAI-ARIA, благодаря атрибуту role="button" объявляют пользователю, что он имеет дело с кнопкой (проверено в следующих связках: VoiceOver в Safari на OS X 10.8 и NVDA в IE9 на Windows 7).
  • Button 3: получает фокус и активируется при помощи клавиатуры двумя возможными вариантами – клавишами Enter и Space. Что касается программ чтения с экрана, то здесь поведение такое же как и в предыдущем случае (Button2).
  • Button 4: Во всех случаях поведение аналогично тому, что происходит с Button 3.

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

Один комментарий на Создание кликабельных и фокусируемых при помощи клавиатуры элементов.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *