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.
Never miss an important story
Weekly news updates, no spam, and you can unsubscribe anytime.