Атрибут tabindex тега <article>
Описание
Атрибут tabindex определяет, может ли элемент <article> получать фокус и его позицию в последовательности перехода по элементам страницы с помощью клавиши Tab.
<!-- Статья с возможностью фокусировки -->
<article tabindex="0">
<h2>Фокусируемая статья</h2>
<p>Эта статья может получать фокус при навигации с клавиатуры.</p>
</article>
<!-- Статья вне последовательности табуляции -->
<article tabindex="-1">
<h2>Программно фокусируемая статья</h2>
<p>Можно сфокусировать только через JavaScript.</p>
</article>
<!-- Статья с кастомным порядком -->
<article tabindex="5">
<h2>Статья с приоритетным порядком</h2>
<p>Получит фокус раньше элементов с меньшим tabindex.</p>
</article>
Значения атрибута:
| Значение | Поведение | Рекомендации по использованию |
|---|---|---|
tabindex="0" |
Элемент включается в естественную последовательность табуляции | Для статей, с которыми нужно взаимодействовать |
tabindex="-1" |
Элемент может получить фокус программно, но не через Tab | Для динамического управления фокусом |
tabindex="1+" |
Элемент получает приоритет в последовательности табуляции | Не рекомендуется (нарушает естественный поток) |
Доступность и лучшие практики:
<style>
article:focus {
outline: 3px solid #4d90fe;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
</style>
<article tabindex="0">
<h2>Доступная статья</h2>
<p>Эта статья правильно работает с клавиатурной навигацией.</p>
</article>
<button onclick="document.querySelector('article').focus()">
Сфокусировать статью
</button>
Важно: Не злоупотребляйте положительными значениями tabindex (>0), так как это нарушает естественный поток документа и может ухудшить пользовательский опыт.
Рекомендации по использованию:
- Используйте
tabindex="0"для статей, с которыми можно взаимодействовать - Для скрытых или неинтерактивных статей не задавайте tabindex
- Всегда обеспечивайте визуальный индикатор фокуса (outline или box-shadow)
- Не используйте tabindex для имитации интерактивных элементов
- Тестируйте навигацию с клавиатуры
Правильное применение в динамическом интерфейсе:
<article id="dynamic-focus">
<h2>Статья с динамическим фокусом</h2>
<p>Эта статья будет получать фокус при определённых условиях.</p>
</article>
<script>
// Добавляем tabindex программно при необходимости
document.getElementById('dynamic-focus').tabIndex = -1;
// Управление фокусом
function showArticle() {
const article = document.getElementById('dynamic-focus');
article.tabIndex = 0;
article.focus();
}
</script>
Сравнение с ARIA-атрибутами:
| Подход | Преимущества | Недостатки |
|---|---|---|
tabindex |
Нативная поддержка, простота использования | Ограниченная семантика |
ARIA (role="article") |
Богатая семантика для скринридеров | Не управляет фокусом |
| Комбинация | Полноценная доступность | Более сложная реализация |
Совет: Для сложных интерактивных статей рассмотрите использование комбинации tabindex="0" и ARIA-ролей, таких как role="article" или role="region".
Пример доступной интерактивной статьи:
<article
tabindex="0"
role="article"
aria-labelledby="article-title"
aria-describedby="article-desc"
>
<h2 id="article-title">Доступная интерактивная статья</h2>
<p id="article-desc">Эта статья полностью доступна для клавиатурной навигации и скринридеров.</p>
<button>Действие внутри статьи</button>
</article>
Примечание: Хотя тег <article> по умолчанию не является фокусируемым элементом, в некоторых случаях добавление tabindex может улучшить пользовательский опыт, особенно для интерактивных статей или одностраничных приложений.