Атрибут tabindex тега <abbr>
Описание
Атрибут tabindex в теге <abbr> определяет, может ли элемент получать фокус и его позицию в последовательности перехода по Tab. Хотя это нестандартное использование для аббревиатур, технически возможно.
<abbr tabindex="0" title="HyperText Markup Language">HTML</abbr>
Значения атрибута:
| Значение | Поведение |
|---|---|
0 |
Включает элемент в естественный порядок перехода |
-1 |
Исключает из последовательности Tab, но разрешает программный фокус |
| Положительное число | Определяет явный порядок перехода (не рекомендуется) |
Особенности работы с <abbr>:
- По умолчанию аббревиатуры не получают фокус
- Может быть полезен для интерактивных подсказок
- Требует JavaScript для обработки событий фокуса
- Не изменяет семантику элемента
<style>
.interactive-abbr:focus {
outline: 2px solid #0066cc;
position: relative;
}
.interactive-abbr:focus::after {
content: attr(title);
position: absolute;
bottom: 100%;
left: 0;
background: #333;
color: white;
padding: 5px;
}
</style>
<abbr tabindex="0"
title="Application Programming Interface"
class="interactive-abbr">API</abbr>
Рекомендации:
- Избегайте использования без реальной необходимости
- Для важных подсказок лучше использовать
<button> - Всегда добавляйте визуальные стили для состояния фокуса
- Проверяйте доступность с клавиатуры
- Не используйте положительные значения tabindex
Важно: Использование tabindex с <abbr> может нарушить стандартные паттерны навигации. Применяйте только в специальных случаях, когда это действительно улучшает UX.
Альтернативный подход:
<button class="abbr-button" tabindex="0">
<abbr title="Representational State Transfer">REST</abbr>
<span class="tooltip">Нажмите для подробностей</span>
</button>
<style>
.abbr-button {
background: none;
border: none;
cursor: help;
}
.tooltip {
display: none;
}
.abbr-button:focus .tooltip {
display: inline;
}
</style>