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

Описание

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

Пример использования:
<cite tabindex="0">Цитата, которая может получать фокус</cite> <cite tabindex="-1">Цитата только для программного фокуса</cite> <cite>Обычная цитата (без фокуса)</cite>

Значения и их поведение:

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

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

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

Пример с интерактивной цитатой:

<style> cite[tabindex]:focus { outline: 2px solid #3498db; background-color: #f8f9fa; } </style> <cite tabindex="0" onclick="alert('Цитата выбрана')"> Нажмите меня или перейдите клавишей Tab </cite>

Пример с программным фокусом:

<cite id="target-cite" tabindex="-1">Программно фокусируемая цитата</cite> <button onclick="document.getElementById('target-cite').focus()"> Установить фокус на цитату </button>

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

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

Важные замечания:

  • По умолчанию <cite> не фокусируем
  • Не злоупотребляйте - только для полезной интерактивности
  • Тестируйте в разных браузерах
  • Для сложной навигации лучше использовать JavaScript

Примечание: Хотя атрибут tabindex можно использовать с тегом <cite>, помните, что семантически цитаты обычно не должны быть интерактивными. Применяйте его обдуманно, только когда это действительно улучшает пользовательский опыт.