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