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 type="tel" will make the telephone input keyboard appear on a mobile device.

Telephone Keyboard

The vast majority of 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. 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.

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.

Related News

Jon is the founder of Coywolf and the EIC and the primary author reporting for Coywolf News. He is an industry veteran with over 25 years of digital marketing and internet technologies experience. Follow @henshaw