JS властивість Element.tabIndex
Загальний опис
tabIndex - це властивість об'єкта Element, яка визначає порядок переходу між фокусованими елементами на веб-сторінці за допомогою клавіатури. Вона дозволяє налаштувати послідовність фокусування елементів, що є особливо важливим для забезпечення доступності веб-додатків. Властивість tabIndex широко використовується для покращення взаємодії користувача з інтерфейсом, особливо для людей з обмеженими можливостями.
Значення tabIndex може бути від 0 до 32767. Елементи з tabIndex=0 або без вказаного значення tabIndex фокусуються в порядку їх появи в коді. Негативні значення tabIndex вказують, що елемент не може отримати фокус за допомогою клавіатури. Позитивні значення tabIndex визначають порядок фокусування: елементи з нижчим значенням tabIndex отримують фокус раніше.
Розглянемо простий приклад:
<input type="text" tabIndex="1">
<input type="text" tabIndex="2">
<input type="text" tabIndex="3">
У цьому випадку, при натисканні клавіші Tab фокус переходитиме від першого поля вводу до другого, а потім до третього.
Однак, tabIndex може бути застосований не лише до елементів форми, але й до будь-яких інших елементів HTML. Наприклад:
<div tabIndex="0">Фокусований div</div>
<a href="#" tabIndex="1">Посилання 1</a>
<a href="#" tabIndex="2">Посилання 2</a>
Тут порядок фокусування буде: div, потім перше посилання, потім друге посилання.
Властивість tabIndex також може бути змінена динамічно за допомогою JavaScript:
const element = document.getElementById('myElement');
element.tabIndex = 1; // Тепер елемент може отримати фокус за допомогою клавіатури
Це корисно, коли необхідно змінити порядок фокусування елементів залежно від певних умов або дій користувача.
Важливо зазначити, що неправильне використання tabIndex може негативно вплинути на доступність веб-додатку. Наприклад, якщо встановити tabIndex="-1" для важливих елементів інтерфейсу, вони стануть недоступними за допомогою клавіатури. Тому рекомендується ретельно продумувати порядок фокусування елементів і використовувати tabIndex лише в разі потреби.
| Порада: | Якщо ви хочете зробити елемент, який за замовчуванням не є інтерактивним, доступним за допомогою клавіатури, встановіть для нього |
| Порада: | Уникайте присвоєння великих значень |
| Порада: | Під час розробки доступних веб-додатків завжди перевіряйте порядок фокусування за допомогою клавіатури. Неправильний порядок фокусування може ускладнити навігацію для користувачів, які покладаються на клавіатуру. Використовуйте |
Синтаксис
Element.tabIndexЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3.1 |
12.1 |
18 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
2 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі демонструється використання властивості tabIndex для керування порядком фокусування елементів за допомогою клавіатури. Є кілька div елементів з різними значеннями tabIndex. Користувач може переміщати фокус між ними, використовуючи клавіші Tab і Shift+Tab. Також є випадаюче меню, яке дозволяє встановити фокус на певному елементі за вибором.
У цьому прикладі ми демонструємо, як зробити елемент div доступним для фокусування за допомогою клавіатури, використовуючи властивість tabIndex. Це може бути корисно, якщо ви хочете додати інтерактивність до елементів, які за замовчуванням не є фокусованими.
<div id="myDiv" tabIndex="0">Клікніть мене або натисніть Enter</div>
<script>
const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', () => {
alert('Ви клікнули на div!');
});
myDiv.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
alert('Ви натиснули Enter на div!');
}
});
<script>У цьому прикладі ми створюємо форму з кількома полями введення та використовуємо властивість tabIndex для визначення логічного порядку фокусування за допомогою клавіатури. Також ми додаємо функціональність для виділення поточного елемента введення, коли він отримує фокус.
<form>
<label>
Ім'я:
<input type="text" id="name" tabIndex="1">
</label>
<label>
Електронна пошта:
<input type="email" id="email" tabIndex="3">
</label>
<label>
Пароль:
<input type="password" id="password" tabIndex="2">
</label>
<button type="submit" tabIndex="4">Відправити</button>
</form>
<script>
const inputs = document.querySelectorAll('input');
inputs.forEach((input) => {
input.addEventListener('focus', () => {
input.style.outline = '2px solid blue'; // Виділити поточний елемент введення
});
input.addEventListener('blur', () => {
input.style.outline = 'none'; // Зняти виділення з елемента введення
});
});
<script>