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 лише в разі потреби.

правити

Порада

Якщо ви хочете зробити елемент, який за замовчуванням не є інтерактивним, доступним за допомогою клавіатури, встановіть для нього tabIndex="0". Це дозволить користувачам переміщати фокус на цей елемент і взаємодіяти з ним, наприклад, за допомогою JavaScript. Наприклад: <div tabIndex="0" onclick="doSomething()">Клікніть мене</div>.

автор: Bond правити

Порада

Уникайте присвоєння великих значень tabIndex, оскільки це може призвести до плутанини в порядку фокусування. Замість цього використовуйте логічну послідовність значень, наприклад, 1, 2, 3 тощо. Якщо ви хочете виключити елемент з порядку фокусування за допомогою клавіатури, встановіть tabIndex="-1".

автор: Bond правити

Порада

Під час розробки доступних веб-додатків завжди перевіряйте порядок фокусування за допомогою клавіатури. Неправильний порядок фокусування може ускладнити навігацію для користувачів, які покладаються на клавіатуру. Використовуйте tabIndex для забезпечення логічного та зрозумілого порядку фокусування, що відповідає потребам вашого додатка.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.tabIndex

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3.1	12.1	18

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	2

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myDiv" tabindex="0">Клацни мене або дійди Tab-ом і натисни Enter</div>

#myDiv {
    padding: 10px;
    border: 1px solid #0172ad;
}

const myDiv = document.getElementById('myDiv');

myDiv.addEventListener('click', () => {
    myDiv.textContent = 'Клік мишею!';
});

// tabindex="0" впустив div у порядок фокуса — тепер він чує клавіатуру
myDiv.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        myDiv.textContent = 'Enter із клавіатури!';
    }
});

<form>
    <p><label>Ім'я: <input type="text" id="name" tabindex="1"></label></p>
    <p><label>Пошта: <input type="email" id="email" tabindex="3"></label></p>
    <p><label>Пароль: <input type="password" id="password" tabindex="2"></label></p>
    <button type="submit" tabindex="4">Відправити</button>
</form>
<p>Тисни Tab: порядок обходу — ім'я, пароль, пошта (за tabindex).</p>

const inputs = document.querySelectorAll('input');

inputs.forEach((input) => {
    input.addEventListener('focus', () => {
        input.style.outline = '2px solid #0172ad';
    });

    input.addEventListener('blur', () => {
        input.style.outline = '';
    });
});