Implementing Keyboard Shortcuts in your Web Application.

September 22, 20130 Comments

What do GitHub, Twitter, Gmail, JIRA, Trello and Facebook all have in common? Try press ‘?‘ on any of these platforms, and behold the wealth of keyboard input that awaits you.

They’ve all taken the time an effort to implement keyboard shortcuts, with a view to improving accessibility on their platform.

See this example from Twitter:

twitter-keyboard-short

and this one from Zendesk. 

zendesk

Even in this age of swipe and pinch, and mobile becoming ubiquitous  –  keyboard input is still the primary interface between you and your users; and if you can give them a quicker, more intuitive way to get shit done, that has to be a good thing.

As desktop applications have conceptually had shortcuts for years, it makes sense that we as developers follow suit when building more engaging applications for the web, that are not only easier to use – but accessible as well. If we can take away anything from these bigger online companies, its that the 1% of users DOES matter, and this level of attention to detail makes the difference between good and great. 

So what libraries are available for implementing this sort of thing?

For keyboard shortcuts:

MouseTrap.js – Weighs 1.9k zipped.

Keyboard.js – 12k zipped. Although has some more advanced features such as key combo overlap prevention.

HotKeys – John Resig (author of jQuery) actively develops this HotKeys plugin.

The benefits for the physically disabled and partially sighted are obvious as well, and a more accessible website could both increase your revenue and help you reach a new audience. Whilst accessibility hasn’t (yet) been given the recognition it deserves online, eventually with the continued campaigning from organisations such as RNIB, eventually developers will face up to the seriousness of the issue, and see that taking the time to implement accessible features such as keyboard shortcuts is definitely worthy of attention. Not only will it improve the experience for users who do use keyboards as the primary input mechanism, it also makes the experience better for power users, who simply enjoy using shortcuts to navigate faster around your site or application.

If you are planning on picking up the mantel and starting to develop more  accessible applications, it’s worth noting some of the HTML attributes that can be used within your document to assist screen readers further with the task of understanding your content. This article from Microsoft details building accessible HTML5 applications, uses the additional attributes to dictate content type and usage, and is a great intro to the concept.

The W3C guidelines on accessible rich internet applications, is slightly drier reading – but obviously much more detailed documentation for developers. For HTML5 apps, this article provides good detail on the bare minimum on what you need to know and the accesskeys attribute is  good start for any developer looking to improve accessibility throughout a simple document.

So what conventions should developers use?

This is a much more difficult question to answer. There are obviously certain keys that within different contexts mean certain things. For example.

Pressing ESC – close something (e.g. an open dialog or window)

Pressing Space – stop start something (Video player? / Slideshow?)

Under the Windows platform that the majority of users will be accustomed to, this guideline of standard Windows application conventions is a good starting point to base your decisions around. For more custom interactions, unfortunately you are going to have to ask your users to do some learning. But, that’s ok – screenreaders will pick these up from your HTML code, and those power users who appreciate such an enhancement will be well accustomed to learning shortcuts at their leisure already, and indeed likely have a printout happily taped to their desk.

Filed in: Programming
Tagged with:

Leave a Reply

Back to Top

Share This