Таблица клавиш: обозначить команды без неясных иконок

Назначение

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

Как это работает

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

Пример

<style>.keys{border-collapse:collapse}.keys th,.keys td{padding:.6rem;border:1px solid #9ab3a3;text-align:start}.keys kbd{font-family:monospace;padding:.1rem .3rem;border:1px solid #829b8a;border-radius:.2rem}</style>
<table class="keys"><caption>Пример документации учебного редактора</caption><thead><tr><th scope="col">Команда</th><th scope="col">Сочетание</th></tr></thead><tbody><tr><th scope="row">Запустить пример</th><td><kbd>Ctrl</kbd> + <kbd>Enter</kbd></td></tr><tr><th scope="row">Закрыть подсказку</th><td><kbd>Esc</kbd></td></tr></tbody></table>

Что должно получиться

Каждая команда связана со своим сочетанием в строке таблицы. Текст остаётся читаемым без стилизации «клавиш». Никакой обработчик из этой разметки не возникает.

Граница применения и частая ошибка

Не обещайте сочетания, которые приложение не поддерживает. У разных платформ и раскладок возможны различия, а системные комбинации нельзя бездумно перехватывать. Пользователь должен иметь альтернативу важным действиям через обычный интерфейс.

Самостоятельная проверка

Составьте таблицу только для реально работающих команд своего проекта. Проверьте каждую и укажите платформенные варианты при необходимости. Сравните документацию с поведением фокуса и доступными кнопками.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Клавиатура
• Адаптивность
• Подпись поля