Атрибут accesskey тега <canvas>

Описание

Атрибут accesskey для элемента <canvas> позволяет назначить горячую клавишу для быстрого доступа к элементу canvas. Хотя canvas обычно не является интерактивным элементом формы, этот атрибут может быть полезен для управления интерактивными холстами.

Пример использования:
<canvas id="drawingCanvas" width="500" height="300" accesskey="D"> Интерактивная область рисования (Alt+D) </canvas>
Аспект Описание Особенности
Активация Alt + ключ (Windows), Control + ключ (Mac) Зависит от браузера и ОС
Значение Один символ (буква, цифра) Регистр не имеет значения
Доступность Фокусирует элемент для последующего взаимодействия Требует дополнительной JS-логики

Практический пример с обработкой:

<canvas id="sketchpad" width="400" height="300" accesskey="S" tabindex="0"> Нажмите Alt+S для активации (только рисование) </canvas> <script> const canvas = document.getElementById('sketchpad'); const ctx = canvas.getContext('2d'); let isDrawing = false; canvas.addEventListener('focus', () => { canvas.style.border = '2px solid blue'; }); canvas.addEventListener('blur', () => { canvas.style.border = '1px solid #000'; }); // Логика рисования... </script>

Особенности работы с canvas:

  • По умолчанию canvas не может получить фокус (нужен tabindex)
  • Требуется дополнительная JavaScript-реализация для обработки действий
  • Лучше использовать для управления инструментами рисования, а не самого холста
  • Может конфликтовать с системными сочетаниями клавиш

Рекомендации:

  • Добавляйте tabindex="0" для возможности фокусировки
  • Обеспечьте визуальную индикацию фокуса
  • Используйте в сочетании с ARIA-атрибутами
  • Указывайте назначенную клавишу в текстовом описании

Примечание: Для сложных интерактивных canvas-приложений лучше создать отдельные элементы управления с accesskey, чем назначать горячие клавиши самому холсту.