Как управлять фокусом на странице с помощью атрибутов tabindex и методов, таких как focus()?

Фокус на веб-странице — это механизм, который определяет, какой элемент активен и готов для взаимодействия с пользователем. Это важно для навигации по странице с клавиатуры и для обеспечения доступности веб-контента для людей с ограниченными возможностями.

Атрибут tabindex:

Атрибут tabindex управляет тем, в каком порядке элементы на странице будут получать фокус при использовании клавиши Tab. Значения tabindex могут быть:

• Положительные значения: Элементы с положительным tabindex получают фокус первыми, в порядке возрастания значения. Например, элемент с tabindex="1" получит фокус перед элементом с tabindex="2".

• Значение 0: Элементы с tabindex="0" участвуют в стандартной навигации по фокусу, но не имеют приоритета.

• Отрицательные значения: Элементы с отрицательным tabindex, такие как tabindex="-1", не могут быть сфокусированы с клавиатуры, но на них можно установить фокус программно с помощью JavaScript.

Пример использования tabindex:

<button tabindex="1">Кнопка 1</button> 
<button tabindex="3">Кнопка 3</button> 
<button tabindex="2">Кнопка 2</button>

В этом примере порядок фокуса будет: Кнопка 1, Кнопка 2, Кнопка 3, так как tabindex определяет последовательность.

Метод focus():

В JavaScript метод focus() позволяет программно установить фокус на элементе. Это полезно для управления фокусом при изменении интерфейса или при необходимости обратить внимание пользователя на определенный элемент:

document.getElementById('myButton').focus();

Пример использования focus() для улучшения доступности: Когда пользователь закрывает модальное окно, можно вернуть фокус на элемент, с которого оно было открыто:

button.addEventListener('click', function() {
	modal.close();    
	button.focus(); // Возвращаем фокус на кнопку после закрытия 
});

Управление фокусом с помощью tabindex и методов, таких как focus(), важно для обеспечения доступности и улучшения пользовательского опыта. Это особенно критично для пользователей, которые полагаются на клавиатуру для навигации по страницам, таких как люди с ограниченными возможностями.