How to handle numeric fields.

If you are a web developer, you know about the type attribute you can use on the inputs element to specify the type of data users should enter into a form. There are several different types of values, and each value can change the type of keyboard that appears to the user. For example, using type="tel" will make the telephone input keyboard appear on a mobile device.

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

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, this type is not well supported by assistive technology like screen readers.

A better approach

So, what we can do to bring up a number keyboard that’s similar to the telephone keyboard, but accessible by screen readers? The answer is by using the type="text" attribute combined with pattern and inputmode to force the correct keyboard, keeping the field accessible.

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

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