Атрибут tabindex тега <aside>

Описание

Атрибут tabindex определяет порядок перехода между элементами при навигации с помощью клавиши Tab. Для тега <aside> он позволяет включать боковую панель в последовательность навигации по странице.

Примеры использования:
<!-- Боковая панель вне потока навигации --> <aside tabindex="-1"> Контент, доступный только программно </aside> <!-- Боковая панель в потоке навигации --> <aside tabindex="0"> Контент, доступный при табуляции </aside> <!-- Боковая панель с кастомным порядком --> <aside tabindex="3"> Будет третьей в последовательности табуляции </aside>

Значения атрибута:

Значение Поведение Доступность
-1 Элемент исключается из последовательности табуляции Доступен через JavaScript focus()
0 Элемент включается в естественный поток навигации В порядке DOM
> 0 Кастомный порядок (не рекомендуется) По возрастанию значений

Особенности для <aside>:

  • Важно: По умолчанию <aside> не получает фокус
  • При tabindex="0" становится фокусируемым
  • Полезен для доступных виджетов в боковой панели
  • Может конфликтовать с логическим порядком страницы
Пример доступного aside-виджета:
<aside tabindex="0" role="complementary" aria-label="Дополнительная информация"> <h3>Быстрые ссылки</h3> <ul> <li><a href="#section1" tabindex="0">Раздел 1</a></li> <li><a href="#section2" tabindex="0">Раздел 2</a></li> </ul> </aside>

Рекомендации по доступности:

  • Совет: Используйте tabindex="0" для интерактивных aside-элементов
  • Избегайте положительных значений (1, 2, 3...) - нарушают логический порядок
  • Сочетайте с ARIA-ролями для скринридеров
  • Тестируйте навигацию только с клавиатуры

Предупреждение: Использование tabindex > 0 создает проблемы для пользователей клавиатуры и считается антипаттерном доступности.

Лучшие практики:

<!-- Хороший пример --> <aside tabindex="0"> <button id="sidebar-toggle">Свернуть</button> <nav aria-label="Боковое меню"> <ul> <li><a href="/home">Главная</a></li> </ul> </nav> </aside> <!-- Плохой пример (кастомный порядок) --> <aside tabindex="2"> <div tabindex="1">...</div> </aside>

Для разработчиков: В JavaScript можно программно управлять фокусом: document.querySelector('aside').focus();

Примечание: В WCAG 2.1 рекомендуется естественный порядок табуляции, соответствующий визуальному расположению элементов.