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

Описание

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

Пример использования:
<table border="1"> <thead accesskey="h"> <tr> <th>Продукт</th> <th>Цена</th> </tr> </thead> <tbody> <tr> <td>Ноутбук</td> <td>45 000₽</td> </tr> </tbody> </table>

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

  • Активируется комбинацией клавиш (зависит от ОС):
    • Windows/Linux: Alt + accesskey
    • Mac: Control + Option + accesskey
  • Фокусирует первый заголовок в группе
  • Не изменяет визуальное отображение
  • Поддерживается современными браузерами

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

  • Используйте для часто используемых таблиц
  • Выбирайте мнемонические клавиши (h для headers)
  • Избегайте конфликтов с системными комбинациями
  • Документируйте горячие клавиши для пользователей

Пример с визуальным обозначением:

<style> thead[accesskey]::before { content: " [" attr(accesskey) "]"; font-size: 0.8em; color: #666; } </style> <table border="1"> <thead accesskey="h"> <tr> <th>Продукт</th> <th>Цена</th> </tr> </thead> </table>

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

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

Пример с JavaScript:

<table border="1" id="sortable-table"> <thead accesskey="s"> <tr> <th>Дата</th> <th>Сумма</th> </tr> </thead> </table> <script> document.addEventListener('keydown', function(e) { if (e.altKey && e.key === 's') { // Для Windows/Linux document.getElementById('sortable-table').focus(); } }); </script>

Примечание: Для сложных интерактивных таблиц:

  • Используйте ARIA-роли для улучшения доступности
  • Реализуйте полноценную клавиатурную навигацию
  • Рассмотрите специализированные компоненты таблиц