Атрибут tabindex тега <figure>
Описание
Атрибут tabindex в теге <figure> определяет, может ли элемент получать фокус и его позицию в последовательности навигации по клавише Tab. Это полезно для создания интерактивных изображений с подписями.
<figure tabindex="0">
<img src="interactive-chart.png" alt="Интерактивный график">
<figcaption>Рисунок 2. Нажмите для деталей</figcaption>
</figure>
Значения атрибута:
| Значение | Поведение | Рекомендуемое использование |
|---|---|---|
0 |
Включает элемент в естественную последовательность табуляции | Для интерактивных элементов |
-1 |
Позволяет фокусироваться программно, но исключает из таб-последовательности | Для динамического управления фокусом |
| Положительное число | Задает явный порядок (не рекомендуется) | Устаревший подход |
Пример интерактивного элемента:
<figure tabindex="0"
style="outline: none; cursor: pointer;"
onfocus="this.style.boxShadow='0 0 0 3px #4CAF50'"
onblur="this.style.boxShadow='none'"
onclick="showDetails()">
<img src="product.jpg" alt="Наш продукт">
<figcaption>Изображение 3. Нажмите для увеличения</figcaption>
</figure>
<script>
function showDetails() {
// Логика показа деталей
}
</script>
Рекомендации по доступности:
- Всегда добавляйте визуальный стиль для состояния
:focus - Обеспечьте логическую последовательность навигации
- Не злоупотребляйте - добавляйте tabindex только для интерактивных элементов
- Тестируйте навигацию с помощью клавиатуры
Ограничения:
- Может нарушить естественный порядок навигации
- Требует дополнительной работы для поддержки доступности
- Не все браузеры одинаково обрабатывают фокус
Примечание: Для обычных изображений с подписями атрибут tabindex обычно не требуется. Используйте его только когда элемент <figure> действительно интерактивен и должен реагировать на действия пользователя.