Как управлять фокусом и порядком табуляции в интерфейсе?

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

Основы

• Естественный порядок фокуса следует порядку в DOM, поэтому структуру HTML строят логично.
• Фокусируются ссылки, кнопки, поля и элементы с tabindex="0".
• tabindex="-1" делает элемент фокусируемым программно, но убирает из обхода по Tab.
• Значения tabindex больше нуля меняют порядок и считаются плохой практикой.
• Видимый индикатор нельзя убирать: outline: none без замены ломает навигацию. Используют :focus-visible.

Модальные окна

• При открытии переводят фокус внутрь (на заголовок или первое поле).
• Держат фокус в окне (focus trap), а вне окна делают содержимое недоступным: атрибут inert или aria-hidden.
• Закрытие по Escape и возврат фокуса на элемент, который открыл окно.

dialog.showModal();     // нативный <dialog> сам захватывает фокус
trigger.focus();        // после закрытия вернуть фокус

Коротко для собеседования

Порядок фокуса определяет DOM, индикатор должен быть виден, а для диалогов важны перенос фокуса внутрь и возврат после закрытия.