Number type

Pattern Checker

What does this mean?

A field is using a type="number" attribute.

For example:

<label for="month">Month</label>
<input type="number" id="month">

Impact on users

This type value has several usability (and related accessibility) issues.

A few examples:

  • this type attribute adds "spinner" controls to the input (up and down arrows) which can be triggered by mistake and which is announced as a "spin button" to screen-readers
  • it does not work well for fields asking for currency values as the trailing zero (e.g. "£100.50") can be removed on page load by the browser
  • browsers may silently not take non-numeric data entry from the user, or amy take it and not submit it, resulting in different data being submitted than intended

How to fix

Set the type to text instead and add inputmode="numeric" instead.

For example:

<label for="month">Month</label>
<input type="text" id="month" inputmode="numeric">

References

Classification

Level: warn
Tagged: best-practice

See all issues