Search code examples
javascriptkeyboard-shortcutsaccessibilityria

Conventions for keyboard shortcuts in RIA across browsers, accessibility


Creating a browser based single-page browser based RIA. Would like to make use of keyboard shortcuts extensively. At first my focus was professional users who like alternatives to clicking, and for it to work in a variety of browsers. Researching, I now see a whole literature on supporting physical accessibility in general, and am afraid this could become a Master's thesis rather than a days's work.

Is there a concise guide to which keys are

  • Okay to use across browsers (e.g. don't override Cmd+W on Mac or Ctrl+P on Windows)
  • Conventionally used for certain purposes (e.g. Cmd+Z/Ctrl+Z = Undo is an obvious one)
  • Identified in common accessibility standards

For instance, not being familiar with all browsers or alternative devices for different abilities, would be nice if I could look at a grid to make sure I wasn't accidentally alienating a group of otherwise contented users.

I can find lots of links on the mechanics of key mapping (Mousetrap.js was easy and effective, btw), but not much on the conventions/guidelines/standards across browsers and human-usability segments, e.g. these links:

If it matters, jQuery (or any other useful library) is fine.


Solution

  • The DHTML Style Guide, developed with input from a variety of stakeholders, has recommended keyboard models for a wide variety of RIA widgets: http://dev.aol.com/dhtml_style_guide/

    These have been adopted into the W3C's WAI-ARIA 1.0 Best Practices: http://www.w3.org/WAI/PF/aria-practices

    Moving forward I think it's important for us all to follow these recommendations. If we're all on the same page, that will decrease the likelihood of conflicts, and will minimize the number of unique keyboard models users have to memorize.