Introduction - What is input masking
An input mask is an input field that automatically formats as you type in a value. The input field uses the native HTML5 “pattern,” which takes in a regular expression to determine if the formatting is correct.
Many benefits can come from input masking, but if done wrong, it can lead to many usability and accessibility challenges.
Please note – that these are my opinions on what makes an accessible input mask. I could not find much helpful information online in 2023, so I’m writing my guidance. Please let me know if you have any issues, concerns, or ideas to improve this resource.
Benefits
If input masking is done well, for many, it can be a good user experience that we don’t even notice. For example, some of the benefits users can have is:
- Speed: Saving users time by automatically helping them get the correct format.
- Prevention for error: Users are less likely to misformat a telephone number, reducing friction in a shopping experience.
- Consistency in data: When you’re taking in customer data, you want that data to be structured.
- Easier to read: The input mask can make the input field visually more appealing and organized when applied to the format.
- Reduced anxiety: It can help increase confidence by teaching users how we should be entering data.
Challenges of input masking:
When input masking goes wrong, it can cause many usability and accessibility challenges.
- Confusing for screen reader: When items inject on the screen without warning a screen reader user, it can be a confusing experience.
- Difficulties fixing typos: When a user makes a mistake in their values, often fixing those errors can be complex when masking is applied.
- Sometimes complex: Input masks can also make it more difficult for users to enter data, especially if the mask is complex or the user is not familiar with the format.
- Less flexible: Users have preferences. Input masks may limit input flexibility, preventing someone from entering data in a way that feels most comfortable to them.
Accessibility Requirements (6)
Requirement 1 of 6: Always use the best input type for the job.
The correct input field type will allow users on a mobile device to see the proper keyboard. The UK government design system researched this and recommended using an input to the kind of “text” and the input mode of “numeric.”
Below you will find a code snippit. You can skip this code-snippet by navigating to the next heading level 3.
<input type="text" inputmode="numeric" pattern="[0-9]*">
Related WCAG for this requirement:
- WCAG SC 1.3.1: Info and Relationships (Level A).
- WCAG SC 4.1.2, Name, Role, and State (Level A).
Requirement 2 of 6: Don’t allow users to enter symbols
Do not let users insert symbols such as slashes, dashes, or spaces. Make the job simple by only allowing users to enter digits (numbers only).
Related WCAG for this requirement:
- WCAG SC 1.3.1: Info and Relationships (Level A).
Requirement 3 of 6: Allow users to edit anywhere
We must let a user edit anywhere they like, whether at the beginning or in the middle of the input field. If a user deletes a character, don’t automatically move focus to the end of the input field; Keep the focus in the same location. For example, many input fields force users to begin typing at the end of the input field when they make a mistake. When functionality is removed from the native default, it can be extremely frustrating.
Related WCAG for this requirement:
- WCAG SC 3.2.2: On Input (Level A)
Requirement 4 of 6: Helper text must always be present when we use input masking.
We need both visible helper and off-screen helper text. When I mention helper text, I’m referring to information that gets placed in the accessible description of an element.
- Visible Helper:
- If there are number constraints, describe the digit count and the field name in the visible helper text. Such as a “10-digit phone number” or “16-digit credit card number.”
- Off-Screen Helper Text:
- The off-screen helper text must let the screen reader user know that the form field has an input mask. Such as: “This field has masking. It will automatically format as you type.”
- The off-screen helper text must let the user know which inputs are allowed. Such as: “Only numbers are allowed.”
Related WCAG for this requirement:
- WCAG SC 3.3.2: Labels or Instructions (Level A)
Requirement 5 of 6: Both form constraints and patterns should be available and programmatically associated.
- Form constraints: must always be visible, especially if it’s a field you can misinterpret. For example, the date field can have formatting such as “MM/DD” or “DD/MM.” Instructions on the constraint should be visible to let a user know what we need. Place the date formatting in the label, as it usually has higher contrast than the helper text and it is usually more noticeable.
- Placeholder Patterns: Developers should not place the placeholder pattern in the “value” property of the input field; Otherwise, it can cause confusing announcements for the screen reader. Placeholder patterns typically use underscores to explain the design, such as “(___)-___-____.” Youtube Video: placing underscores as the value – bad example.
Related WCAG for this requirement:
- WCAG SC 3.3.2: Labels or Instructions (Level A)
Requirement 6 of 6: Allow users to copy/paste values.
Supporting pasting also means allowing users to use the browser’s autocomplete or a tool such as a password manager to paste values. The goal is to add functionality with the input masking and not to remove it. Removing copy/pasting from an input field goes against the browser’s default which can be confusing, so it needs to be supported.
Related WCAG for this requirement:
- WCAG SC 1.3.5: Identify Input Purpose (Level AA)
Additional notes:
Should the MM/DD/YYYY be uppercase or lowercase?
After conducting a test, I found that the constraint/pattern should be set to uppercase. However, we should also rely on the helper text (requirement 4) to inform users as it’s the most consistent.
| Screen Reader Name | Uppercase or Lowercase | Notes |
|---|---|---|
| MacOS VoiceOver (Desktop) | Uppercase | Uppercase is preffered in MacOS desktop. Voiceover announces "YYYY" much better. If it's lowercase, it says "EE-Eye" |
| iOS VoiceOver (Mobile) | Neither | Neither/ Voiceover on iOS mobile + safari, they announced only two letter "y" regardless of the case used. The preffered solution is to rely on helper text described in requirement #4. |
| Jaws | Uppercase | Uppercase is preffered in Jaws. Jaws announced up to 3 letter "y" when capitalized. When it was lowercase it only announced "EE-Eye." |
| NVDA | Both | NVDA announced them both correctly in full. We heard 4 letter "y" announced. |
Accessible Code Demo
Visit the following to see a code demo: Codepen: Accessible Form Input Masking – Giovani Camara
In the code demo, I used the input masking library by Estelle. Youtube: Watch a video of me using this feature with VoiceOver
Below is an iframe of a codepen code example. Skip by heading 2 to navigate past this, you will encounter the conclusion heading.
See the Pen Accessible Form Input Masking - Giovani Camara by Giovani Camara (@giovanicamara) on CodePen.
Other Design Options
Create 3 separate fields for a date
This blog post would not be complete if I didn’t list the alternatives. You could also opt out of using input masking and relaying on separate input fields. For example, the UK Gov Design System uses separate input fields to make this pattern accessible. You could argue it’s slower because you add more tab stops, or it takes up more space. It’s really up to preference.
Conclusion
In conclusion, form masking can be an excellent toolset for your website if you follow these tips to make it accessible. If you incorporate masking, be sure to work with a design system or create a process to justify how/when to use masking.
As always, please let me know if you find anything in this article that can be improved, is incorrect, or is anything at all.
Find me on Linkedin: Giovani Camara (I am more responsive there). Cheers!
Note: I applied WCAG through my own opinions. WCAG is subjective, so feel free to apply WCAG requirements how you think it best applies.
Resources:
Links
- Article: Why the GOV.UK Design System team changed the input type for numbers
- Github: Accessible input masking by Estelle
Related WCAG Requirements
- SC 4.1.2: Name, Role, Value (Level A)
- Relates to: Requirements 1.
- SC 1.3.1: Info and Relationships (Level A)
- Relates to: Requirements 1 and 2.
- SC 3.2.2: On Input (Level A)
- Relates to: Requirement 3.
- SC 3.3.2: Labels or Instructions (Level A)
- Relates to: Requirements 4 and 5.
- SC 1.3.5: Identify Input Purpose (Level AA)
- Relates to: Requirement 6.
Updates made to this blog post
- 01/19/2023: Made grammar and typo updates. Thanks to Diane Ko for the recommendations.
- 1/20/2023: Added an alternative to input masking and a video explaining requirement #5.
38 responses to “Accessible Input Masking”
Update: Another reason on why we should capitalize the MM/DD/YYYY. In the Unicode Date Field Symbol spec, lowercase “m” stands for minutes, and “M” stands for months.
Hi there, I want to suƅscribe for this websіte to get most up-to-datе upԁates, thus where can і do
it please hеlp out.
Fantastic goods from you, man. I have սnderstand your stuff previous to
and yoս’re just extremely fantastic. I really lіke what you’ve acquired here, really like what you are saying and the way in whiϲh you say it.
You make it enjoyable and you still care for to kｅep it smɑrt.
I cant wait to read much more from you. This is actually a terrific site.
Ηellߋ to alⅼ, hߋw is all, Ӏ tһіnk every one is getting more
from this ᴡebsite, and yoᥙr views aгe pleasant in support of new visіtors.
I do not know whether it’s ϳust me or if eνeryⲟne else experiencing issues with your site.
It looks like some of the written text in your
poѕts are running off the screen. Can somebοdy else please pгοvide feedback and let me know if this is hɑppening to them too?
This may be ɑ issue with my browser becausе I’ve had
this happen befⲟre. Kudos
Thank you for thе аuspicious writeuⲣ. It in fact waѕ
a amusement account it. Look advanced to more added agrеeable from you!
Hoԝeᴠer, how could we communiсate?
Нello there! Would you mind if I shaｒe your blog with my facebook
groᥙp? There’s a lot of peopⅼe that I think ԝould really appreciate your content.
Pleаse let me know. Many thanks
Pretty nice ρost. I sіmplʏ stumbled ᥙpon уour
weblog and wanted to say that I have truly enjoyed browsing your
weblog posts. In any cɑse I’ⅼl be suƄscribing to your rss feｅd and I’m hoping you write
again soon!
Becaսse the admin of this website is working,
no uncertainty very qսickly it will be famous,
dᥙe to its quality contents.
I ѵisited many sites but the audio quality for
audio songs existing at this web site is really fabulous.
ｅаcһ time i used to read smаller articles or reviews which also
clear their motive, and thɑt is also happening wіth this piece of writing which Ӏ am reаding at
this place.
Helⅼo to every one, the contents existing
at this wｅb pɑge are genuinely awesome f᧐r people knowledge,
well, keep up the good work fellows.
Hеllo, after readіng this awesome piece of wrіting i am
aѕ well happy to share my ҝnow-how here with friends.
Ηave you ever thought about including a little bit more than just үour articles?
I mean, what you say iѕ important and everʏthing.
However іmagine if you ɑdded some great visualѕ or videos to give your posts more, “pop”!
Your content is excellent but with pics and clips, this site could certainly be one of the most beneficial
in its field. Goоd blog!
What’s up everyone, it’s my first visit at this ᴡebsite, and article is
really fгuitful for me, keep up posting such posts.
I quitｅ lіke reading through a post that can make people think.
Also, thanks for permitting me tߋ commеnt!
Whаt’s up Dear, are you really visiting this site daily, if so afterѡarɗ you will
without doubt obtain pleasant knowledge.
Whеn someone writes an artiⅽle he/she keeps the
image of a user in his/her mind that how a user can be aware of it.
Ƭherefore that’s why this paragraph is amazing. Thanks!
Thiѕ web site definitely has аll of the information I wanted concerning this subject and didn’t know who to ask.
hеllo!,I like your writing so a lot! share
we be in contact more approxіmately y᧐ur article on AOL?
I need a speciɑlіst in tһis area to solve my problem.
May be thɑt’s you! Taking a look ahead to look ｙou.
What’s up, I would ⅼike to subscribe for this webpage to obtain latest updateѕ, tһus where can i Ԁo it please heⅼp out.
Valսable information. Lucky me I discovеred your website by ϲhance, and I’m surprised why this accident did not took place in advance!
I bookmarked it.
I қnow this web paցe provides quɑlity dependent articles
or reviews and additional stuff, is there any оtһｅr web page which presents these things in quaⅼity?
Wrіte more, thats all I have to say. Literallｙ, it seems as thօugh
you relied on the video to makе your pօint. You clearly know what youre talking аbout, why throw away your intelligence on just
posting videos to your ѕite when you c᧐uld bе giving us somｅthing informɑtive to read?
Thank үou for sһaring yоur info. I truly appreciate
your efforts and I am waiting for yoսr further post thank you once again.
Can I just say ԝhat a comfort to dіscover ѕomeone that trսly
սnderstands what thеy’re discuѕsing on the internet.
You definitely understand how to Ƅring an issսe to lіght and make іt important.
A lot more people must look at this and understand this side ⲟf the
story. I can’t believe you are not more poρular because you most certainly havе the gift.
Ꮩery nice ρost. I just stumbled upon your weƄlog and wished to saү
that I have truly enjoʏеd surfing aгound your blߋg posts.
Aftеr aⅼl I will be suЬscribing to your rss feed
and I hope you write again soon!
Ӏ am genuinely delighted t᧐ read this wｅbpage posts which carries tons of usefuⅼ facts, thanks for
providing such information.
Verｙ nice post. I just stumbled սpon your blog and wanted tο say that I’ve truly loved browsing
your blog ρosts. In any case I’ll be subscribing to your rss feed
and I hօpe you write again very soon!
I do not evеn know how I endeԁ up here, but Ι thougһt this
post was good. I dо not know who you arе Ƅut definitely you’re going to a famoᥙs blogger if you are not already 😉 Cheers!
Υeѕ! Finally something about xxx.
Ηurrаh, that’s wһat I was еxplorіng for, what a
materіal! prеsent here at this webpаge, thanks admin of thіs website.
It’s very effⲟrtless to find out any tоpic on web as
compared to textbοoks, as I found this paragｒaph at this website.
Ԍood web site yoս’ve got here.. It’s hard to find eⲭcｅllent writing like yours nowadays.
I reɑlly apрreciate individuals likе you! Take care!!
Ƭhis info is invaluable. Wһere can I find out moгe?
Pretty! This hɑs been an incredibly wonderful pⲟst. Thanks for providing these
detailѕ.
Нello! This is kind of off topic but I need some advice from an established blog.
Is it difficult to set up your own bⅼog? I’m not
very tecһincal but Ι can figure things out pretty quick.
I’m thinking about creating my own but I’m not sure where to begin. Do you have any points or suggestions?
Aρⲣreciate it
In fact when ѕomeone doesn’t understand afterward its up to other peoрle that they wiⅼl
assist, so here it takes place.