Атрибут tabindex тега <i>
Описание
Атрибут tabindex позволяет сделать элемент <i> фокусируемым и управлять его позицией в последовательности перехода по клавише Tab. По умолчанию элементы <i> не участвуют в навигации.
<i tabindex="0">⭐</i> <!-- Делает элемент фокусируемым -->
<i tabindex="-1">🔒</i> <!-- Доступен только для программного фокуса -->
<i tabindex="1">🚀</i> <!-- Явное указание порядка (не рекомендуется) -->
Значения атрибута:
| Значение | Поведение | Использование |
|---|---|---|
0 |
Включает в естественный порядок табуляции | Для интерактивных иконок |
-1 |
Делает фокусируемым, но исключает из табуляции | Для программного управления фокусом |
| Положительное число | Задает явный порядок (1, 2, 3...) | Не рекомендуется (нарушает естественный поток) |
Практический пример с фокусом:
<style>
i:focus {
outline: 2px solid #3498db;
border-radius: 3px;
}
</style>
<i tabindex="0">👍</i>
<i tabindex="0">👎</i>
<script>
document.querySelectorAll('i[tabindex="0"]').forEach(icon => {
icon.addEventListener('focus', () => {
console.log('Иконка в фокусе:', icon.textContent);
});
});
</script>
Рекомендации по доступности:
- Добавляйте
tabindex="0"только для интерактивных иконок - Сочетайте с
role="button"илиrole="link" - Обеспечьте визуальный стиль для состояния
:focus - Добавляйте
aria-labelдля иконок без текста - Избегайте положительных значений tabindex
Примечание: Хотя технически возможно сделать элемент <i> фокусируемым, семантически правильнее использовать <button> для интерактивных элементов. Применяйте tabindex к <i> только когда это действительно необходимо и обеспечивайте соответствующую доступность.