Recently, I recommended shortcut keys for a web application and somebody in the room asked if that was even possible. I replied “of course” and cited a couple examples. Gmail immediately came to mind since it was one of the first web apps I encountered with shortcuts. While shortcuts like CTRL+S or ⌘+P are common in desktop apps, they are less so in web apps. However, they can be a huge time saver for repetitive functions and have there place in sovereign applications.
Since that conversation, I have been thinking about how this actually gets done. I knew that HTML has an accesskey attribute and wondered if it was as easy as adding some of these attributes where needed. While this works as advertised, it requires two control keys in many browsers (e.g. CTRL+OPTION), which might not be desirable.
The Codepen for my little experiment appears below…