Pin entry fields, keylogging, security and a DOM solution

I looked over the wireframes of a new project today and discovered a weird one for the use case of entering a PIN number: The client defined a keypad like you would see on a cash machine, and requested that the user should enter the PIN thus – via the mouse. The accessibility militia member in me started to frown upon this, considering that a password field is a lot easier to use and wondered if that is a marketing gimmick. However, upon reading further into the requirements, I realised that it is a security measure to prevent keylogging software to store the pins users enter in the application. However, I don’t think that there is a truly accessible solution for that problem, as you will need JavaScript to change a field’s value when clicking other buttons – unless you want to reload on every button click. I came up with a DOMscripting solution for the problem, check the test page for DOMpinpad here and wondered if there are more options to improve this. Currently the pad

  • only applies itself when DOM is supported and JavaScript is available
  • renders the PIN field readonly and greyed out only when the pad can be used
  • can be used with a keyboard and tabbing and with the mouse (is there a safety hazard in the tabbing ability? Wouldn’t that be trackable, too?)
  • is self contained, as in plays well with other scripts
  • is styleable via CSS

I tested it on MSIE 6,Firefox and Opera on PC and Safari on Mac, please report any problems you may encounter. If this one is considered a worthy solution, I will wrap it up and release the code at a later stage.