Why the Gov.uk Design System team changed the input type for numbers
technology.blog.gov.uk
Why the Gov.uk Design System team changed the input type for numbers
1–10 of 177 posts
Re: Why the Gov.uk Design System team changed the input type for numbers
#2It's good to see UX design problems analyzed from a technical perspective. Designers working on the web should be proficient at understanding the medium on which they work, and look beyond generating static images to toss over the wall for implementation.
Re: Why the Gov.uk Design System team changed the input type for numbers
#3Better option is graceful degradation, just Target those specific problematic UAs for the other input type.
Re: Why the Gov.uk Design System team changed the input type for numbers
#4In summary the main issue is that, according to the spec, `` is only for numbers that are going to be parsed into a Javascript number. It has to make sense to increment, decrement or do other numerical operations on it. It's not to be used for strings or identifiers that just so happen to be numbers, e.g. credit card numbers. I'll admit this is slightly surprising to me but it does make a certain amount of sense.
The solution is to use ``.
Re: Why the Gov.uk Design System team changed the input type for numbers
#5> However the inputmode attribute is now supported by all the mobile browsers we test in.
This isn't extensive, which might be a tad misleading if you don't double check. They test on Chrome & Samsung for Android, and iOS is only the one engine.
And those three browsers seem to be the only mobile browsers that have implemented it. (Well, Opera Mobile as well). [0]
Desktop support is also extremely spotty.
This seems like it might be leaping the gun on expecting this standard to pick up the slack.
Whilst they might feel the support is there for their particular audience after 2019, I wouldn't, and would suggest that you need to check your particular audience closely before following this advice for your own site. (Which is fairly generic advice, but appropriate.)
Re: Why the Gov.uk Design System team changed the input type for numbers
#6Better option is graceful degradation, just Target those specific problematic UAs for the other input type.
As with most accessibility problems... Checking my User Agent won't tell you how I'm interacting with the site.
How do you detect I'm using NVDA? It'll still look like Firefox. Or Chrome if I'm bypassing a broken UA detection.
Nowhere will you see NVDA, even though it is the problem.
Re: Why the Gov.uk Design System team changed the input type for numbers
#7> However the inputmode attribute is now supported by all the mobile browsers we test in. This isn't extensive, which might be a tad misleading if you don't double check. They test on Chrome & Samsung for Android, and iOS is only the one engine. And those three browsers seem to be the only mobile browsers that have implemented it. (Well, Opera Mobile as well). [0] Desktop support is also extremely spotty. This seems…
The article covers quite a few issues with type=number, including some pretty bad accessibility ones. On balance I think even if inputmode doesn't have 100% support, those users will simply get a normal keyboard, which isn't so bad. Disclaimer - I work on the team.
Re: Why the Gov.uk Design System team changed the input type for numbers
#8> However the inputmode attribute is now supported by all the mobile browsers we test in. This isn't extensive, which might be a tad misleading if you don't double check. They test on Chrome & Samsung for Android, and iOS is only the one engine. And those three browsers seem to be the only mobile browsers that have implemented it. (Well, Opera Mobile as well). [0] Desktop support is also extremely spotty. This seems…
In this case, the fallback is still a plain-text field, into which the user should enter numbers. Perfectly usable, but without the keyboard hint, so it seems like a graceful fallback to me.
Re: Why the Gov.uk Design System team changed the input type for numbers
#9In summary the main issue is that, according to the spec, ` ` is only for numbers that are going to be parsed into a Javascript number. It has to make sense to increment, decrement or do other numerical operations on it. It's not to be used for strings or identifiers that just so happen to be numbers, e.g. credit card numbers. I'll admit this is slightly surprising to me but it does make a certain amount of sense. Th…
I've come across this problem a number of times. The same applies in, for example, passing IDs across in JSON where I use strings if at all possible.
Even money amount are typically challenging to treat as numeric as often that drops them into a float when you shouldn't be processing money amounts as floats.
Re: Why the Gov.uk Design System team changed the input type for numbers
#10Better option is graceful degradation, just Target those specific problematic UAs for the other input type.
Unless I'm missing something, the graceful degradation is the `pattern="[0-9]"`. Certainly `input type="text"` is about as "degradation friendly" as you can get in HTML land...