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.
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.
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
inputmode="numeric" a number keyboard will appear on mobile devices.
<input type="text" pattern="[0-9]*" inputmode="numeric">
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.