A couple of months ago I saw a Google+ post by Robert Nyman referring to the menu of shortcut keys that appears when you hit the
? key on the keyboard in certain web apps.
Try it: Go to Twitter.com, GitHub.com, or Gmail, and you’ll see each of those apps will trigger a modal window of shortcut key definitions when you hit the question mark key.
I think this should be the standard way for all websites/apps. A modal window of keyboard shortcuts is just one way to do that.
So over the past 3 or 4 days I hacked together QuestionMark.js. It’s a tiny script that uses the Fetch API to display a multi-column layout of shortcut key definitions in a modal window.
All the code, info, and demos you’ll need are at the links below:
To make it work, just customize the question.mark.html page to match your app’s shortcut keys, and include the script and CSS file. You can also install it via npm:
npm install question-mark-js
As long as the markup is consistent with the example markup already included, you should have no problems. Although it is responsive, there is currently no way that I know of to trigger the modal on a touch device. I suppose you could add a separate button that displays on certain devices or screen sizes to trigger it.