Make sure methods are device independent

Technology oriented Frontend developer

Device independent JavaScript methods are not dependent on a specific device input. Using a combination of the following methods will ensure accessibility both from mouse, keyboard, touch and assistive technology. Ensuring keyboard access goes a long way for ensuring access to different assistive technologies.

Input methods for mouse are:

  • onMouseOver
  • onMouseOut
  • onClick (Mostly works with the Enter key)

Input methods for keyboard are:

  • onFocus 
  • onBlur (Especially practical for live validation)
  • onChange (use with caution, goes against WCAG)
  • onSelect (use with caution, goes against WCAG)
  • onkeypress 
  • onkeydown 
  • onkeyup

Input methods for touch are:

  • touchstart
  • touchmove
  • touchend
  • touchenter
  • touchleave
  • touchcancel

Without device independent methods users may have problems with:

  • Navigation
  • Content being hidden from them
  • Lack of control over automated content changes

Read more in Accessible JavaScript – JavaScript event handlers or in Luke Wroblewskis book Mobile and Multi-device design.

WARNING: Use onChange and onSelect with caution as they go against WCAG 3.2.1. and 3.2.2

Related guidelines:
Difi UU-skolen: Tastaturnavigering (norwegian)
WCAG Guideline 2.1 Keyboard accessible: Make all functionality accessible from a keyboard