На каких элементах можно фокусироваться?

Элементы, способные получать фокус в веб-интерфейсах

В контексте веб-разработки и доступности (accessibility) фокус означает, что элемент является активной точкой взаимодействия с пользователем через клавиатуру, голосовые команды или другие вспомогательные технологии. Способность элемента получать фокус определяется его семантикой, атрибутами и ролью в DOM.

1. Естественно фокусируемые элементы (по умолчанию)

Эти элементы имеют встроенную фокусируемость благодаря своей семантике и не требуют дополнительных атрибутов:

• Интерактивные элементы форм:

    *   `<input>` (все типы: text, checkbox, radio, button и т.д.)
    *   `<select>`
    *   `<textarea>`
    *   `<button>`

• Ссылки: <a> с атрибутом href.
• Элементы с определёнными атрибутами:

    *   `<area>` внутри `<map>` (если есть `href`)
    *   `<summary>` (в контексте `<details>`)

• Элементы управления в мультимедиа:

    *   `<audio>` и `<video>` с атрибутом `controls`.

Пример естественного порядка фокуса в форме:

<form>
    <label for="name">Имя:</label>
    <input type="text" id="name"> <!-- Фокусируемо -->
    <textarea id="message"></textarea> <!-- Фокусируемо -->
    <button type="submit">Отправить</button> <!-- Фокусируемо -->
</form>
<a href="/about">О нас</a> <!-- Фокусируемо -->

2. Элементы, ставшие фокусируемыми через tabindex

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

• tabindex="0": Делает элемент фокусируемым в естественном порядке потока документа. Он будет включён в последовательность табуляции после всех элементов по умолчанию. Это основной способ сделать неинтерактивные элементы доступными.
• tabindex="-1": Делает элемент фокусируемым программно, но исключает его из последовательности табуляции. Фокус можно установить только с помощью JavaScript (например, element.focus()). Часто используется для управления фокусом в модальных окнах или динамически добавляемых регионах.
• tabindex со значением > 0: Устанавливает явный порядок табуляции, что считается антипаттерном доступности, так как ломает логичный естественный поток и может дезориентировать пользователей. Следует избегать.

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

<div class="custom-widget" tabindex="0" role="button">
    Эта кастомная кнопка теперь фокусируема
</div>
<!-- Модальное окно, появляющееся по нажатию -->
<div id="modal" tabindex="-1" role="dialog" aria-modal="true">
    <!-- Содержимое модалки -->
</div>

// Фокус можно установить программно на элемент с tabindex="-1"
const modal = document.getElementById('modal');
modal.style.display = 'block';
modal.focus(); // Это сработает

3. Элементы, ставшие фокусируемыми через ARIA-роли

Атрибуты WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) могут изменять семантику элемента для вспомогательных технологий. Некоторые роли неявно подразумевают фокусируемость, но требуют обязательного использования tabindex для практической реализации в браузере.

• Роли виджетов: role="button", role="link", role="checkbox", role="menuitem", role="tab" и другие.
• Роли составных виджетов: role="combobox", role="slider".
• Ключевое правило: Присвоение роли, подразумевающей интерактивность, не делает элемент автоматически фокусируемым для клавиатуры. Всегда требуется управление tabindex и реализация соответствующей клавиатурной логики (обработчики для Enter, Space, стрелок).

Пример создания доступного кастомного чекбокса:

<div id="customCheckbox" 
     role="checkbox" 
     tabindex="0" 
     aria-checked="false">
    Согласен с условиями
</div>

const checkbox = document.getElementById('customCheckbox');
checkbox.addEventListener('click', toggleCheckbox);
checkbox.addEventListener('keydown', (e) => {
    // Обработка нажатий Space и Enter для активации с клавиатуры
    if (e.code === 'Space' || e.code === 'Enter') {
        e.preventDefault();
        toggleCheckbox();
    }
});
function toggleCheckbox() {
    const isChecked = checkbox.getAttribute('aria-checked') === 'true';
    checkbox.setAttribute('aria-checked', String(!isChecked));
}

Ключевые принципы управления фокусом

• Визуальный индикатор: У фокусируемого элемента обязательно должен быть визуальный outline (или его кастомная замена) в состоянии фокуса. Его подавление (outline: none) без альтернативы — грубая ошибка.
• Логичный порядок: Порядок табуляции должен соответствовать визуальному потоку и логике документа. Это проверяется навигацией с помощью Tab и Shift+Tab.
• Управление фокусом в динамических интерфейсах: При открытии модального окна, добавлении нового контента или навигации между компонентами (например, в SPA) фокус должен программно перемещаться в логичную точку, чтобы не терять контекст для пользователей клавиатуры и скринридеров.
• Никогда не удалять элементы из фокуса: Не использовать tabindex="-1" для скрытия элементов от пользователей клавиатуры без веской причины. Если элемент виден и функционален, он должен быть доступен.

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