Создание табуляции div элементов на JavaScript: решение

Быстрый ответ

Для того чтобы div элемент стал доступен для фокусировки при нажатии клавиши Tab, добавьте к нему атрибут tabindex="0":

<div tabindex="0">
  Теперь я доступен для навигации с помощью клавиатуры!
</div>

Это приведет к тому, что div элемент будет включен в общий порядок переключения элементов на веб-странице с помощью клавиши Tab. Для повышения удобства использования и четкого понимания пользователем состояния фокусировки применяйте CSS-селектор : focus и обработчики событий на JavaScript.

Основные принципы взаимодействия с клавиатурой

Улучшаем стиль фокусировки

div:focus {
  outline: 2px solid #00f; /* Синий контур делает выделение элемента более заметным */
}

Преобразуем div в интерактивную кнопку

Чтобы div вел себя как кнопка, нужно добавить обработчики событий фокусировки и нажатия клавиш, например Enter или Пробел:

document.addEventListener('DOMContentLoaded', function() {
  var divTabIndexed = document.querySelector('div[tabindex="0"]');
  divTabIndexed.addEventListener('keypress', function(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      this.click(); // имитация действия нажатия кнопки, удобно для пользователя
      event.preventDefault(); // чтобы страница не прокручивалась при нажатии пробела
    }
  });
});

Делаем атрибуты кликабельными

Подчеркните, что div предназначен для кликов, добавив атрибут onclick или назначив соответствующий класс:

<div tabindex="0" class="clickable" onclick="alert('Клик сработал!')">Нажми на меня</div>
<style>
.clickable {
  cursor: pointer; /* курсор в виде стрелки привлекает внимание пользователя */
}
</style>

Аккуратная работа с порядком табуляции

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

<div tabindex="5">Должен ли я быть на пятом месте?</div>

Визуализация – эмодзи-история

Представим, что у нас есть галерея интерактивных элементов (🖼️), а клавиша Tab – это фонарь (🔦), освещающий div элементы, как экспонаты:

🔦 освещает фокусируемый div элемент.
🖼️ [Div 1, Div 2, Div 3 (сияющая звезда 🌟), Div 4]

Теперь Div 3 – основной экспонат:

<div tabindex="0">Div 3</div> // Div 3: "Я в центре внимания!"

С помощью клавиши Tab, Div 3 выделяется из общей массы, привлекая к себе внимание. Он словно главный актер на премьере!

Путь света: [🖼️] ➡️ [🔦] ➡️ [🌟]
# Div 3 – это тот экспонат, на который фонарь указывает, как бы говоря "Вот он!":

Применение div элементов для различных целей

Создание сетки, управляемой с клавиатурой

Представьте интерактивную сетку, где каждый элемент отзывается на команды с клавиатуры:

<div tabindex="0" class="grid-cell">Ячейка 1</div>
<div tabindex="0" class="grid-cell">Ячейка 2</div>
<!-- И так далее для элементов сетки -->
<style>
.grid-cell:focus {
  background-color: lightblue; /* несколько больше внимания к выделенному элементу */
}
</style>

Исключение некоторых элементов из фокусировки

Иногда бывает требуется убрать элементы из последовательности фокусировки, сделав их более "скрытыми":

<div tabindex="-1" inert>Не нужно нажимать на это 🎵 </div>

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

Для тех, кто предпочитает работать с jQuery, есть полезный плагин:

(function($) {
  $.fn.tabbableEnchantments = function() {
    this.attr('tabindex', '0').addClass('tabbable');
    this.on('keypress', function(e) {
      if (e.which === 13 || e.which === 32) {
        $(this).click(); // клавиши Enter и Пробел на выручку
        return false; // предотвращаем прокрутку страницы
      }
    });
    return this;
  };
}(jQuery));

$('.my-div').tabbableEnchantments(); // Добавьте магии вашим div элементам

Полезные материалы

1. JavaScript-виджеты и доступность для работы с клавиатурой | MDN – Все о создании доступных и легко навигируемых виджетов.
2. Руководство WAI-ARIA по управлению с использованием клавиатуры | WAI | W3C – Методы управления элементами с клавиатурой согласно WAI-ARIA.
3. WebAIM: Доступность управления с помощью клавиатуры – Стратегии и методы, обеспечивающие удобство работы с элементами с клавиатуры.
4. Почему не стоит использовать tabindex больше 0 — Adrian Roselli – Пояснения, почему использование высоких значений tabindex может запутать пользователя.
5. Как убрать пунктирную обводку | CSS-Tricks – Способы стилизации визуальных эффектов выделения элемента при фокусировке.