Управление фокусом после изменения интерфейса

Назначение

Изменение видимой части страницы может оставить клавиатурного пользователя без понятной точки продолжения. Управление фокусом связывает действие и его результат, когда обычного порядка переходов недостаточно.

Как это работает

Для учебной страницы создайте кнопку id show-result и скрытую секцию id result с tabindex="-1". Внутри секции разместите заголовок результата. Код подключите после разметки: сначала нужно показать область, затем перевести фокус.

Пример

const trigger = document.querySelector("#show-result");
const result = document.querySelector("#result");
trigger.addEventListener("click", () => {
  result.hidden = false;
  result.focus();
});

Что должно получиться

После активации кнопки фокус оказывается на показанной секции. Отрицательный tabindex позволяет программное фокусирование, не добавляя эту секцию в обычную последовательность Tab.

Граница применения и частая ошибка

Не переносите фокус при каждом фоновом обновлении: это мешает чтению и вводу. Элемент должен иметь понятное содержание и заметное оформление фокуса. При закрытии временного интерфейса продумайте возврат к исходному действию, если оно ещё существует.

Самостоятельная проверка

Пройдите сценарий только клавиатурой и проверьте document.activeElement. Увеличьте масштаб, чтобы область оказалась ниже видимого экрана. Оцените прокрутку и не отключайте её через preventScroll без проверки, что фокус остаётся видимым.

Связанные материалы

• Ошибки формы
• События
• Постепенное улучшение