Most web developers are using inaccessible number inputs on forms and here is how to fix it

A common form input type that's used by most web developers to make filling out numbers on forms easier isn't fully accessible. The GOV.UK Design System team published the correct way to make entering numbers accessible for everyone.

Web developers assign the type attribute to input elements to specify the type of data users should enter into a form. There are several different type values, and each value can change the type of keyboard that appears to the user. For example, using input="tel" will make the telephone input keyboard appear on a mobile device.

Telephone Keyboard

The vast majority of web developers use input="number" when they want the user to enter a number. That’s because it brings up a keyboard that displays numbers. However, there’s a problem with this practice.

Numeric Keyboard

The number type should only be used for amounts. An amount is equivalent to a price or number of items. The (mis)use of number for other kinds of numbers is considered a good user experience. However, the GOV.UK Design System team found that it’s not well supported by assistive technology like NVDA and Dragon Naturally Speaking.

GOV.UK recommends using type="text" in combination with some additional attributes for numbers that aren’t amounts. Šime Vidas, Founder of Web Platform News, says text should be used if the number is a code, PIN, account number, identification number, or any other numeric value that doesn’t represent an amount.

The GOV.UK site provides instructions on how to make type="text" still bring up a number keyboard that’s similar to the telephone keyboard. If you add pattern="[0-9]*" and inputmode="numeric" a number keyboard will appear on mobile devices.

<input type="text" pattern="[0-9]*" inputmode="numeric">
Number Keyboard

Web developers are encouraged to switch to this method to ensure the best user experience and to make sure it’s accessible to all users.

Never miss an important story

Weekly news updates, no spam, and you can unsubscribe anytime.

  • This field is for validation purposes and should be left unchanged.

Jon is the founder and Managing Editor of Coywolf. He has over 25 years of experience in web development, SaaS, internet strategy, digital marketing, and entrepreneurship. Follow @henshaw