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

Описание

Атрибут accesskey позволяет назначить клавишу быстрого доступа для элемента <dialog>. При нажатии комбинации клавиш (обычно Alt + ключ в Windows/Linux или Control + ключ в Mac) диалоговое окно будет активировано.

Пример использования:
<button onclick="document.getElementById('helpDialog').showModal()"> Справка (Alt+H) </button> <dialog id="helpDialog" accesskey="h"> <h3>Справка по системе</h3> <p>Здесь содержится справочная информация...</p> <button onclick="this.closest('dialog').close()">Закрыть</button> </dialog>

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

Платформа Комбинация клавиш Примечание
Windows/Linux Alt + accesskey В Firefox: Alt + Shift + accesskey
macOS Control + Option + accesskey В Safari: Control + Alt + accesskey
Chrome OS Alt + accesskey

Рекомендуемые клавиши:

<!-- 1. Первая буква функции --> <dialog id="searchDlg" accesskey="s">Поиск...</dialog> <!-- 2. Цифры для нумерованных диалогов --> <dialog id="step1" accesskey="1">Шаг 1</dialog> <!-- 3. Избегайте конфликтов с браузером --> <dialog id="printDlg" accesskey="p"> <!-- Не используйте 'p' если мешает работе браузера --> Печать документа </dialog>

Программное управление:

<script> // Назначение accesskey через JavaScript document.getElementById('settingsDialog').accessKey = 't'; // Показать все назначенные клавиши (для отладки) function showAccessKeys() { const dialogs = document.querySelectorAll('dialog[accesskey]'); dialogs.forEach(dlg => { console.log(`Диалог ${dlg.id}: ${dlg.accessKey}`); }); } </script>

Ограничения и проблемы:

  • Конфликты с комбинациями клавиш браузера
  • Нет стандартного визуального отображения подсказки
  • Разные комбинации на разных платформах
  • Ограниченная поддержка на мобильных устройствах

Решение для отображения подсказок:

<style> dialog[accesskey]::after { content: " [" attr(accesskey) "]"; font-size: 0.8em; color: #666; } </style> <dialog id="contactDlg" accesskey="c"> Контактная форма <button onclick="this.closest('dialog').close()">Закрыть</button> </dialog>

Лучшие практики:

  • Используйте одну букву или цифру в нижнем регистре
  • Избегайте часто используемых браузерных комбинаций (F, E, P и др.)
  • Дублируйте функциональность другими способами (кнопки, меню)
  • Документируйте горячие клавиши для пользователей
  • Тестируйте на разных платформах

Совместимость:

  • Поддерживается всеми современными браузерами
  • Работает только с элементами, которые могут получать фокус
  • Может потребовать JavaScript для полной функциональности

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