Как ходить Tab по сложным div?

Управление фокусом с помощью Tab в сложных DOM-структурах

Навигация с помощью клавиши Tab в сложных интерфейсах, построенных на div-элементах, представляет классическую проблему доступности (a11y). По умолчанию Tab перемещает фокус только между интерактивными элементами (<a>, <button>, <input>, элементы с tabindex="0"). Когда вся интерактивность реализована на div, это ломает стандартную навигацию. Решение заключается в комбинации семантики, ARIA-атрибутов и JavaScript.

Основные подходы и техники

1. Использование семантических HTML-элементов

Лучший подход — всегда использовать нативные интерактивные элементы там, где это возможно:

<!-- Вместо <div class="button"> -->
<button class="custom-button">Действие</button>

<!-- Вместо <div class="link"> -->
<a href="#" class="custom-link">Ссылка</a>

Нативные элементы автоматически получают правильную табличную навигацию, клавиатурные события и семантику для скринридеров.

2. Атрибут tabindex

Когда div необходимо сделать фокусируемым:

<div 
  class="custom-widget"
  tabindex="0"           <!-- Включает элемент в порядок Tab -->
  role="button"          <!-- Сообщает скринридеру о семантике -->
  aria-label="Выполнить действие" <!-- Альтернатива для скринридеров -->
>
  Содержимое виджета
</div>

Важные нюансы:

• tabindex="0" — включает элемент в естественный порядок Tab
• tabindex="-1" — позволяет программно фокусировать элемент, но исключает из порядка Tab
• tabindex="1" и выше — антипаттерн, ломает естественный порядок

3. Управляемые компоненты (Widgets)

Для сложных виджетов (аккордеоны, модальные окна, кастомные dropdown) необходимо:

• Управлять фокусом программно
• Реализовать логику захвата фокуса (focus trap) в модальных окнах
• Обеспечить клавиатурную навигацию внутри виджета

Пример кастомного аккордеона:

class CustomAccordion {
  constructor(container) {
    this.container = container;
    this.headers = container.querySelectorAll('[role="button"]');
    this.setupKeyboardNavigation();
  }

  setupKeyboardNavigation() {
    this.headers.forEach(header => {
      header.addEventListener('keydown', (e) => {
        switch(e.key) {
          case 'Enter':
          case 'Space':
            e.preventDefault();
            this.toggleSection(header);
            break;
          case 'ArrowDown':
            this.focusNextHeader(header);
            break;
          case 'ArrowUp':
            this.focusPreviousHeader(header);
            break;
          case 'Home':
            this.focusFirstHeader();
            break;
          case 'End':
            this.focusLastHeader();
            break;
        }
      });
    });
  }

  focusNextHeader(currentHeader) {
    const currentIndex = Array.from(this.headers).indexOf(currentHeader);
    const nextIndex = (currentIndex + 1) % this.headers.length;
    this.headers[nextIndex].focus();
  }
}

4. Стратегии для сложных интерфейсов

Приоритетность фокусируемых элементов

/* Визуальный индикатор фокуса */
.custom-focusable:focus {
  outline: 3px solid #4d90fe;
  outline-offset: 2px;
}

/* Скрытие фокуса только для мыши, но не для клавиатуры */
.custom-focusable:focus:not(:focus-visible) {
  outline: none;
}
.custom-focusable:focus-visible {
  outline: 3px solid #4d90fe;
}

Управление порядком Tab

// Программное управление порядком фокуса
function manageTabOrder() {
  const focusableElements = Array.from(
    document.querySelectorAll('[tabindex="0"], button, a, input')
  ).sort((a, b) => {
    // Сортировка по позиции в DOM или кастомной логике
    return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
  });

  // Настройка обработчиков для сложной навигации
  focusableElements.forEach((el, index) => {
    el.dataset.tabIndex = index;
  });
}

5. ARIA Live Regions и динамический контент

Для областей, которые обновляются динамически:

<div 
  aria-live="polite"
  aria-atomic="true"
  class="notification-area"
>
  <!-- Динамически добавляемый контент будет объявлен скринридером -->
</div>

6. Тестирование доступности

Обязательные проверки:

1. Только клавиатура — пройти весь интерфейс используя Tab, Shift+Tab, стрелки
2. Логичный порядок — фокус движется предсказуемо, слева-направо, сверху-вниз
3. Визуальный индикатор — всегда видно, какой элемент в фокусе
4. Управление фокусом — в модальных окнах фокус не уходит за их пределы
5. Скринридеры — тестирование с NVDA, JAWS, VoiceOver

Рекомендации по реализации

1. Минимизируйте кастомные фокусируемые div — используйте семантические элементы
2. Реализуйте полную клавиатурную модель для кастомных виджетов (WAI-ARIA Authoring Practices)
3. Управляйте фокусом при динамических изменениях (SPA-переходы, AJAX-загрузка)
4. Не злоупотребляйте tabindex — более 5-10 кастомных фокусируемых элементов на странице усложняют навигацию
5. Документируйте клавиатурную навигацию для сложных компонентов

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