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.


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:

  1. Speed: Saving users time by automatically helping them get the correct format.
  2. Prevention for error: Users are less likely to misformat a telephone number, reducing friction in a shopping experience.
  3. Consistency in data: When you’re taking in customer data, you want that data to be structured.
  4. Easier to read: The input mask can make the input field visually more appealing and organized when applied to the format.
  5. 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.

  1. Confusing for screen reader: When items inject on the screen without warning a screen reader user, it can be a confusing experience.
  2. Difficulties fixing typos: When a user makes a mistake in their values, often fixing those errors can be complex when masking is applied.
  3. 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.
  4. 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.

  1. 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.”
  2. 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.

Testing results for screen readers using uppercase vs lowercase
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.

Input mask from the UK Gov that has 3 input fields. One for day, month, year.
Image: The UK Gov Design System Date Input Pattern.


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.



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.

Comments (Markdown Supported)

38 responses to “Accessible Input Masking”

  1. Giovani says:

    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.

  2. vk ไทย says:

    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.

  3. japan porn says:

    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 keep it smɑrt.
    I cant wait to read much more from you. This is actually a terrific site.

  4. xxx says:

    Η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.

  5. 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

  6. 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?

  7. Нello there! Would you mind if I share 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

  8. 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 feed and I’m hoping you write
    again soon!

  9. Becaսse the admin of this website is working,
    no uncertainty very qսickly it will be famous,
    dᥙe to its quality contents.

  10. japan xxx says:

    I ѵisited many sites but the audio quality for
    audio songs existing at this web site is really fabulous.

  11. eа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.

  12. Helⅼo to every one, the contents existing
    at this web pɑge are genuinely awesome f᧐r people knowledge,
    well, keep up the good work fellows.

  13. animekimi says:

    Hеllo, after readіng this awesome piece of wrіting i am
    aѕ well happy to share my ҝnow-how here with friends.

  14. Η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!

  15. jav subthai says:

    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.

  16. I quite lіke reading through a post that can make people think.

    Also, thanks for permitting me tߋ commеnt!

  17. Whаt’s up Dear, are you really visiting this site daily, if so afterѡarɗ you will
    without doubt obtain pleasant knowledge.

  18. porn says:

    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!

  19. pornhub says:

    Thiѕ web site definitely has аll of the information I wanted concerning this subject and didn’t know who to ask.

  20. pornhub says:

    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 you.

  21. 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.

  22. 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.

  23. I қnow this web paցe provides quɑlity dependent articles
    or reviews and additional stuff, is there any оtһer web page which presents these things in quaⅼity?

  24. doujin says:

    Wrіte more, thats all I have to say. Literally, 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 something informɑtive to read?

  25. 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.

  26. xxx says:

    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.

  27. Ꮩ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!

  28. Ӏ am genuinely delighted t᧐ read this webpage posts which carries tons of usefuⅼ facts, thanks for
    providing such information.

  29. Very 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!

  30. 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!

  31. li chang says:

    Υeѕ! Finally something about xxx.

  32. Η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.

  33. It’s very effⲟrtless to find out any tоpic on web as
    compared to textbοoks, as I found this paragraph at this website.

  34. vk only says:

    Ԍood web site yoս’ve got here.. It’s hard to find eⲭcellent writing like yours nowadays.
    I reɑlly apрreciate individuals likе you! Take care!!

  35. animexxx says:

    Ƭhis info is invaluable. Wһere can I find out moгe?

  36. Pretty! This hɑs been an incredibly wonderful pⲟst. Thanks for providing these

  37. Н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

  38. In fact when ѕomeone doesn’t understand afterward its up to other peoрle that they wiⅼl
    assist, so here it takes place.

Leave a Reply

Your email address will not be published. Required fields are marked *

About this post:

Giovani Camara
Giovani Camara

Search for a post

Blog Categories