Атрибут tabindex тега <ins>
Описание
Атрибут tabindex определяет порядок перехода между элементами при навигации с помощью клавиши Tab. Для тега <ins> он может сделать вставленный текст фокусируемым.
<p>
Важное изменение:
<ins tabindex="0">Новые условия использования</ins>
</p>
<script>
document.querySelector('ins').addEventListener('focus', function() {
this.style.outline = '2px solid blue';
});
</script>
Значения tabindex:
| Значение | Поведение | Пример |
|---|---|---|
0 |
Включает элемент в естественный порядок табуляции | tabindex="0" |
-1 |
Делает элемент фокусируемым программно, но не через Tab | tabindex="-1" |
| Положительное число | Определяет приоритет табуляции (не рекомендуется) | tabindex="1" |
Пример с доступными изменениями:
<style>
ins:focus {
background-color: #e6f7ff;
outline: 2px solid #1890ff;
}
</style>
<div>
<h3>История изменений</h3>
<p>
<ins tabindex="0">Изменение 1</ins>,
<ins tabindex="0">Изменение 2</ins>
</p>
</div>
Рекомендации:
- Используйте
tabindex="0"для важных изменений - Избегайте положительных значений (нарушают естественный порядок)
- Сочетайте с CSS-стилями для состояния
:focus - Добавляйте JavaScript-обработчики для интерактивности
- Тестируйте с клавиатурной навигацией
Пример с программным фокусом:
<div>
<ins id="important-change" tabindex="-1">Важное обновление!</ins>
<button onclick="highlightChange()">Показать</button>
</div>
<script>
function highlightChange() {
const change = document.getElementById('important-change');
change.focus();
change.style.backgroundColor = '#fff3cd';
}
</script>
Ограничения:
- Не все браузеры одинаково обрабатывают фокус на инлайновых элементах
- Может нарушить стандартную навигацию по странице
- Требует дополнительной стилизации для визуального выделения
Примечание: Использование tabindex для элемента <ins> оправдано, когда вставленный текст требует особого внимания пользователя. Однако злоупотребление может ухудшить пользовательский опыт, особенно для пользователей клавиатуры.