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

Question

Атрибут tabindex управляет порядком, в котором элементы на странице получают фокус при навигации с клавиатуры. Элементы с положительным значением tabindex получают фокус в порядке возрастания числа, элементы с tabindex="0" — в порядке их появления, а отрицательные значения делают элемент недоступным для фокусировки с клавиатуры. Метод focus() в JavaScript позволяет программно устанавливать фокус на элементе. Это важно для обеспечения доступности и удобства управления для пользователей с особыми потребностями.

YeaHub · Accepted Answer

Фокус на веб-странице — это механизм, который определяет, какой элемент активен и готов для взаимодействия с пользователем. Это важно для навигации по странице с клавиатуры и для обеспечения доступности веб-контента для людей с ограниченными возможностями.Атрибут tabindex:Атрибут tabindex управляет тем, в каком порядке элементы на странице будут получать фокус при использовании клавиши Tab. Значения tabindex могут быть:Положительные значения: Элементы с положительным tabindex получают фокус первыми, в порядке возрастания значения. Например, элемент с tabindex="1" получит фокус перед элементом с tabindex="2".Значение 0: Элементы с tabindex="0" участвуют в стандартной навигации по фокусу, но не имеют приоритета.Отрицательные значения: Элементы с отрицательным tabindex, такие как tabindex="-1", не могут быть сфокусированы с клавиатуры, но на них можно установить фокус программно с помощью JavaScript.Пример использования tabindex: В этом примере порядок фокуса будет: Кнопка 1, Кнопка 2, Кнопка 3, так как tabindex определяет последовательность.Метод focus():В JavaScript метод focus() позволяет программно установить фокус на элементе. Это полезно для управления фокусом при изменении интерфейса или при необходимости обратить внимание пользователя на определенный элемент:document.getElementById('myButton').focus();Пример использования focus() для улучшения доступности: Когда пользователь закрывает модальное окно, можно вернуть фокус на элемент, с которого оно было открыто:button.addEventListener('click', function() { modal.close(); button.focus(); // Возвращаем фокус на кнопку после закрытия });Управление фокусом с помощью tabindex и методов, таких как focus(), важно для обеспечения доступности и улучшения пользовательского опыта. Это особенно критично для пользователей, которые полагаются на клавиатуру для навигации по страницам, таких как люди с ограниченными возможностями.