On input validation and accessibility
I use a custom keyboard layout based on the Programmer Dvorak layout, where numeric keys are accessed using shift. Accessing number keys via shift is also present on, e.g., the bépo layout.
Over the past several months, I’ve noticed that more and more websites use validation that prevents me from entering numeric values. This is because the validation is performed ath the keycode level, and disallows the use of shift keys (or even the “Fn” key to access the keypad layer on my laptop keyboard). The culprits range from my bank, to PayPal, to an orchestra website, to Naxos Music Library.
Consider for example the following piece of validation code from NML that checks a page number is valid:
function GotoPageKeyDown(txtObject, txtKeyCode)
{
if( txtKeyCode == 13)
{
GoToPage(txtObject);
}
if( (txtKeyCode == 189 || txtKeyCode == 109) ||
(txtKeyCode >= 48 && txtKeyCode <= 57) ||
(txtKeyCode == 8) ||
(txtKeyCode == 18) ||
(txtKeyCode == 37) ||
(txtKeyCode == 39) ||
(txtKeyCode == 46) ||
(txtKeyCode == 116) ||
(txtKeyCode >= 96 && txtKeyCode <= 105) ) {
return true; }
else {
//alert(txtKeyCode );
return false;
}
}
Because I access digits through the “shift” key (keycode 16), the above validation blocks their entry as soon as I hit the shift key and returns false. If you really want to use javascript to validate input, please do so after the user has actually entered the input instead of as they attempt to do so. I should not have to regularly switch back to the standard US keyboard layout every time I need to enter numerical values in forms.
Comments: To comment on this post, send me an email following the template below. Your email address will not be posted, unless you choose to include it in the link: field. If your web browser is configured to handle mailto: links, click comment to load the template into your mail client.
To: Ryan Kavanagh <rak@rak.ac> Subject: [blog-comment] /blog/2018-09-02-on-accessibility-and-validating-user-input/ post_id: /blog/2018-09-02-on-accessibility-and-validating-user-input/ author: [How should you be identified? Usually your name or "Anonymous"] link: [optional link to your website] Your comments here. Markdown syntax accepted.
1 Comment
Daniel Aleksandersen
You always have to do server-side validation anyway so the client-side pre-validation can be done with HTML instead of JavaScript. Validating on key input won’t work on mobile or when using another input method.
You can either use something simple with the input number controller (<input type="number" step="1">) or be more specific using regular expressions (pattern="[0-9]{2,5}").