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

Описание

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

Пример использования:
<figure> <img src="chart.png" alt="График продаж" tabindex="0"> <figcaption tabindex="0"> Рисунок 1. Динамика продаж за квартал (нажмите Enter для подробностей) </figcaption> </figure>

Допустимые значения:

Значение Поведение Использование
0 Элемент становится фокусируемым в естественном порядке Для добавления в последовательность навигации
-1 Элемент становится фокусируемым программно, но не в таб-последовательности Для управления фокусом через JavaScript
Положительное число Определяет явный порядок (не рекомендуется) Устаревший подход

Пример с интерактивной подписью:

<figure> <img src="infographic.jpg" alt="Инфографика" tabindex="0"> <figcaption tabindex="0" style="outline: none;" onfocus="this.style.backgroundColor='#f5f5f5'" onblur="this.style.backgroundColor='transparent'" onclick="showDetails()"> Рисунок 2. Основные показатели (фокус + клик) </figcaption> </figure> <script> function showDetails() { alert("Подробная информация о графике..."); } </script>

Рекомендации по использованию:

  • Используйте tabindex="0" для важных подписей, с которыми нужно взаимодействовать
  • Добавляйте визуальные стили для состояния :focus
  • Избегайте положительных значений (нарушают естественный поток)
  • Сочетайте с JavaScript для интерактивных подписей
  • Тестируйте с клавиатурной навигацией

Особенности доступности:

  • Добавляет элемент в последовательность навигации
  • Позволяет использовать клавиатурные события
  • Требует визуального отображения фокуса
  • Должен иметь осмысленное взаимодействие

Ограничения:

  • Не делайте фокусируемыми чисто декоративные подписи
  • Избегайте сложных цепочек tabindex
  • Не заменяет семантические интерактивные элементы
  • Может нарушить естественный поток навигации

Примечание: Хотя tabindex может улучшить доступность подписей, его следует использовать обдуманно. Для обычных текстовых подписей он обычно не требуется - применяйте его только когда подпись действительно должна быть интерактивной.