Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Keyboard controls for an international user base

Keyboard controls for an international user base

The UI Events specification comes with two new properties for keyboard events: key and code. They replace the previously existing (and still existing) charCode, keyCode, and which. It’s not just easier to work with keyboard events but it also improves accessibility significantly. Manuel will introduce the new API and illustrate why and how it’s important to an international user base.

https://hacks.mozilla.org/2017/03/internationalize-your-keyboard-controls/
https://caniuse.com/#feat=keyboardevent-code
https://caniuse.com/#feat=keyboardevent-key
https://codepen.io/matuzo/pen/PmgWRm?editors=0010

https://www.meetup.com/de-DE/webclerks/

Manuel Matuzovic

May 31, 2017
Tweet

More Decks by Manuel Matuzovic

Other Decks in Technology

Transcript

  1. Keyboard layouts “A keyboard layout is any specific mechanical, visual,

    or functional arrangement of the keys, legends, or key-meaning associations (respectively) of a computer, typewriter, or other typographic keyboard.” Wikipedia
  2. Events • keydown 
 The keydown event is fired when

    a key is pressed down. • keyup
 The keyup event is fired when a key is released. • keypress
 The keypress event is fired when a key is pressed down
  3. Values • keyCode 
 Returns a numerical code identifying the

    value of the pressed key. • which 
 Returns a numeric code identifying the value of the pressed key; this is usually the same as keyCode. • charCode 
 Returns a Number representing the Unicode reference number of the key; this attribute is used only by the keypress event.
  4. event.keyCode window.addEventListener('keydown', navigate); function navigate(e) { ... if (e.keyCode ===

    68) { moveLeftAndRight(1); } if (e.keyCode === 90) { shootMissile(); } }
  5. Issues • Different meaning of properties when handling a key

    event (keydown or keyup) versus a character event (keypress). • The values of keys in keypress events are different between browsers. • Inconsistent values for keys and events cross-browser • keyCode on key events tries to be international-friendly, but isn’t
  6. UI Events: API • Two new properties: key and code

    • event.key - printable character or a descriptive string, e.g. z • event.code - physical key, e.g. KeyY • Reference keyboard in the specification
  7. window.addEventListener('keydown', navigate); function navigate(e) { ... if (e.code === 'KeyD')

    { moveLeftAndRight(1); } if (e.code === 'KeyY') { shootMissile(); } } event.keyCode
  8. switch(e.code || e.key || e.keyCode ) { ... case 'KeyD':

    case 'ArrowRight': case 39: moveLeftAndRight(1); 
 ... } Fallback
  9. Notes • There is no way of checking for the

    current keyboard layout. • Use the repeat property to check if the user keeps pressing a key and the event is sent repeatedly • Boolean properties for modifier keys (altKey, ctrlKey, metaKey, shiftKey).
  10. TWEETABLE TAKE-AWAY The web is international and so are your

    users. Don’t assume that all users use the same input devices.