Атрибут tabindex тега <code>
Описание
Атрибут tabindex определяет, может ли элемент <code> получать фокус и его позицию в последовательности перехода при навигации с клавиатуры (обычно с помощью клавиши Tab).
<!-- Элемент с возможностью фокусировки -->
<code tabindex="0">Фокусируемый блок кода</code>
<!-- Элемент только для программного фокуса -->
<code tabindex="-1" id="api-code">Блок для API</code>
<!-- Обычный элемент (без фокуса) -->
<code>Стандартный блок кода</code>
Значения и их поведение:
| Значение | Поведение | Использование |
|---|---|---|
0 |
Включает в естественный порядок табуляции | Для интерактивных блоков кода |
-1 |
Фокусируется только программно | Для временного фокуса через JS |
| Положительное число | Определяет явный порядок (не рекомендуется) | Устаревший подход |
| (не указан) | Не участвует в табуляции | По умолчанию |
Практические сценарии:
- Интерактивные примеры кода:
<code tabindex="0" onclick="execute(this)"> // Нажмите или Tab+Enter для выполнения console.log('Hello'); </code>
- Программный фокус для API:
<button onclick="focusCode()">Фокус на код</button> <code tabindex="-1" id="api-target">...</code> <script> function focusCode() { document.getElementById('api-target').focus(); } </script>
Рекомендации по доступности:
- Добавляйте визуальные стили для состояния
:focus:<style> code:focus { outline: 2px solid #3498db; box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); } </style> - Обеспечьте логичный порядок навигации
- Не злоупотребляйте - только для действительно интерактивных элементов
Ограничения:
- По умолчанию
<code>не фокусируем - Разные браузеры могут обрабатывать фокус по-разному
- На мобильных устройствах поведение может отличаться
Примечание: Хотя технически возможно сделать фрагменты кода фокусируемыми с помощью tabindex, семантически это оправдано только для действительно интерактивных элементов, таких как редактируемые примеры кода или кликабельные блоки. Для статического отображения кода использование этого атрибута не рекомендуется.