Атрибут tabindex тега <canvas>
Описание
Атрибут tabindex определяет, может ли элемент <canvas> получать фокус при навигации по странице с помощью клавиши Tab. По умолчанию canvas не является фокусируемым элементом.
<canvas
id="interactiveCanvas"
width="400"
height="300"
tabindex="0"
></canvas>
<script>
const canvas = document.getElementById('interactiveCanvas');
canvas.addEventListener('focus', () => {
canvas.style.outline = '2px solid blue';
});
canvas.addEventListener('blur', () => {
canvas.style.outline = 'none';
});
</script>
| Значение | Поведение | Рекомендуемое применение |
|---|---|---|
0 |
Включает в естественный порядок табуляции | Для интерактивных canvas |
-1 |
Позволяет фокусировать программно | Для временного управления фокусом |
| Не указан | Нельзя фокусировать (по умолчанию) | Для чисто графических canvas |
Практические сценарии:
1. Интерактивное рисование:
<canvas
id="drawingCanvas"
width="500"
height="400"
tabindex="0"
></canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
canvas.addEventListener('keydown', (e) => {
if(e.key === 'ArrowRight') {
// Обработка нажатия клавиш
ctx.fillRect(Math.random()*500, Math.random()*400, 10, 10);
}
});
</script>
2. Управление фокусом:
<canvas id="gameCanvas" tabindex="-1"></canvas>
<button onclick="startGame()">Начать игру</button>
<script>
function startGame() {
const canvas = document.getElementById('gameCanvas');
canvas.focus(); // Программный фокус
// Инициализация игры...
}
</script>
Особенности доступности:
- Всегда добавляйте
aria-labelдля фокусируемых canvas - Обеспечьте визуальный индикатор фокуса
- Для сложных интерактивных элементов используйте роли ARIA
- Тестируйте с клавиатурной навигацией
Рекомендации:
- Используйте tabindex="0" только для действительно интерактивных canvas
- Избегайте положительных значений tabindex (>0)
- Для игр и сложных приложений реализуйте полную клавиатурную навигацию
- Сочетайте с обработчиками клавиатурных событий
Совет: Если canvas используется только для отображения (без взаимодействия), не устанавливайте tabindex - это улучшит пользовательский опыт для клавиатурной навигации.
Примечание: Хотя технически можно сделать canvas фокусируемым, семантически правильнее использовать дополнительные интерактивные элементы (кнопки, контролы) для управления содержимым canvas.