Атрибут tabindex тега <area>
Описание
Атрибут tabindex для тега <area> определяет порядок перехода между интерактивными элементами при навигации с клавиатуры (с помощью клавиши Tab). Этот атрибут делает области изображения-карты доступными для клавиатурного управления.
<img src="keyboard-nav.png" usemap="#keynav" alt="Навигация по клавиатуре">
<map name="keynav">
<area shape="rect" coords="0,0,100,50"
href="#main"
tabindex="1"
alt="Главная (Tab 1)">
<area shape="rect" coords="100,0,200,50"
href="#search"
tabindex="2"
alt="Поиск (Tab 2)">
</map>
Допустимые значения:
| Значение | Поведение | Рекомендации |
|---|---|---|
| 0 | Включает в естественный порядок навигации | Для стандартной последовательности |
| -1 | Исключает из навигации, но доступен через JS | Для программного управления |
| >0 | Задает явный порядок (1, 2, 3...) | Не рекомендуется (нарушает логический порядок) |
Рекомендации по использованию:
- Важно: Используйте
tabindex="0"для добавления в естественный поток навигации - Важно: Избегайте положительных значений - они создают проблемы доступности
- Для интерактивных областей добавляйте визуальные стили состояния :focus
- Сочетайте с JavaScript для сложных сценариев
- Тестируйте навигацию с клавиатуры
Пример правильной реализации:
<style>
area:focus {
outline: 2px solid blue;
}
</style>
<map name="accessible-map">
<area shape="rect" coords="0,0,100,50"
href="#main"
tabindex="0"
alt="Главная">
<area shape="circle" coords="150,25,25"
href="#help"
tabindex="0"
alt="Помощь">
</map>
Ограничения и лучшие практики:
- Области image-map могут быть сложны для навигации на touch-устройствах
- Всегда предусматривайте текстовые альтернативы
- Для сложных интерфейсов используйте SVG или кнопки
- Проверяйте порядок фокусировки
Совет: Для современных проектов вместо image-map с tabindex лучше использовать семантические HTML-элементы (button, a) с CSS-позиционированием.
Примечание: Хотя tabindex позволяет сделать области image-map доступными для клавиатурной навигации, эта технология уступает современным подходам в плане доступности и UX.