Politespace, an unobtrusive alternative to input masks

Posted by Zach, Todd on 04/22/2014

When entering complex strings such as telephone and credit card numbers in web forms, designers commonly ask for the input to be formatted with whitespace or other characters to provide better usability. For example, it is much easier to confirm that you entered the correct credit card number when the value in the input looks like “1234 5678 9012 3456” than “1234567890123456.”

To achieve this effect, developers use a technique called masked inputs that work by manipulating the value in the input every time a character is entered with Javascript to inject spaces, dashes, underscores or other formatting characters as you type.

The downside of this approach is it introduces very serious accessibility issues that can render the form unusable to visitors on screen readers such as VoiceOver and JAWS. As a visually impaired visitor enter enters a character into the input, the mask script manipulates the values to maintain the visual formatting. This causes unexpected results as the screen reader will sometimes read pieces of the newly inserted reformatted value aloud to the user, making it confusing to know what you have or have not typed. In addition if the input mask depicts formatting hints using underscores and other non-whitespace characters, on focus they act as little more than aural garbage when read aloud.

A quick screen/audio recording of tabbing around a form using JS input masks with VoiceOver enabled.—@scottjehl

After trying out a few different approaches, we settled on an unobtrusive plugin that does not change the value of the form field when the user is attempting to interact with it. Instead, it injects whitespace delimiters on blur to allow users to more easily read form values and removes those delimiters when the user focuses back into the field for easy editing. We’re calling it Politespace. See it in action on GitHub.