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

Описание

Атрибут accesskey позволяет задать горячую клавишу для быстрого доступа к элементу <select>. Комбинация клавиш зависит от браузера и операционной системы.

Пример использования:

<select accesskey="c"> <option>Выберите страну</option> <option>Россия</option> <option>США</option> </select> <small>(Alt+C для выбора)</small>

Сочетания клавиш по платформам:

Платформа Сочетание клавиш
Windows/Linux Alt + ключ
Mac Control + Option + ключ
Chrome OS Alt + ключ

Рекомендации по выбору клавиш:

  • Используйте первую букву функции (C - Country)
  • Избегайте конфликтов с системными сочетаниями
  • Дублируйте подсказку в интерфейсе
  • Для форм используйте последовательные клавиши (C, S, A)

Пример с группой элементов:

<form> <label>Страна (Alt+C): <select accesskey="c" name="country"> <option>Россия</option> </select></label> <label>Город (Alt+S): <select accesskey="s" name="city"> <option>Москва</option> </select></label> </form>

Ограничения:

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

JavaScript альтернатива:

<select id="fastSelect"> <option>Вариант 1</option> <option>Вариант 2</option> </select> <script> document.addEventListener('keydown', function(e) { if(e.altKey && e.key === 'c') { e.preventDefault(); document.getElementById('fastSelect').focus(); } }); </script>

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

  1. Документируйте горячие клавиши в интерфейсе
  2. Используйте только для часто используемых элементов
  3. Проверяйте отсутствие конфликтов
  4. Рассмотрите более современные альтернативы

Доступность:

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