My team was asked recently to implement an accessible number input widget that utilizes masking.
As a UI Architect, I'm always willing to investigate if a feature such as masking can be accomplished in an accessible, performant, and high quality manner. Frankly, masking sounds cool and people have argued that it is necessary (source).
However, after trying a few of the libraries related to accessible inputs, such as react-aria's useNumberField and cleave.js, I have found that it is inherently unable to speak the truth to screen-readers and therefore it is not accessible.
But How Is It Not Accessible?
Let’s assume we have a masking scenario where the asterisk character that is illegal:
Let's see how that works with pasting a value and then how that works with typing a value,
If you paste “123*456” then the masking library will be unable to process any of it and will likely remove the entire thing which will leave the user with a blank input. React-aria does this, and you can see it by trying out their decimal example. There’s an even scarier example for which I used when I raised this as a bug to the react-aria team
If you type “123*456” then the masking library will let you type “123” then it will eat the asterisk (meaning the screen reader will say “asterisk” but the input will not show the asterisk) and then it will let you type “456” so what you’ll be left with is “123456” even though the screen reader will have told the user that “123*456” was entered. This is the scenario why I believe that masking is inherently not an accessible solution.
So what now?
Due to this, I now recommend that designers and developers opt to not use masking but to instead use error validation. This allows the user to type or paste what they want, but they will be told that what they typed was not allowed. In summary, it’s better to not “lie” to the screen reader, but instead to give good feedback to the user. Do they lose the nice formatting? Absolutely, but at least you've insulated yourself from ADA lawsuits and, more importantly, you've made your website more inclusive.
I'd love to hear people's thoughts in the comments. I should note that Giovani Camara has written beautifully about how to do your best to make masking accessible, but I would suspect that the test scenarios I mention above are still reproduceable. So, I would still recommend avoiding it.
Top comments (0)