When exploit the HTML standards and when to overwrite/change/force these?

accessibility
usability

#1

The UX team and the FED team are arguing for days on a request from a customer about a test field “type = number”.
The current implementation is HTML standards-compliant and leans to W3C specifications regarding the concept of “[Integer]”

According to the customer, this field should accept only the numbers 0 through 9. He wants to block users to inserting “- + . ,” his request to us is to “force/overwrite” the attribute itself.

Obviously, there are bunch of solutions to achieve what the customer requires, but:

  • All of these solutions are via JS
  • It would change the nature of the text field (especially in terms of accessibility)
  • Is an expensive solution in terms of maintenance

our UX solution is:

  • Respect the semantics of HTML and the browser behavior (ex Chrome vs IE)
  • Optimize the label describing that the field accepts only integers
  • Publish an self-explanatory placeholder like “ex. 14568975”

What do you think, in general, to change the natural behaviour of HTML objects?


#2

We had this exact same issue. In the end we changed it back to a plain text field and implemented JS to allow people to only enter 0-9. However, the other option we looked at was changing it to a ‘phone’ type field, which would have caused issues for accessibility but does provide only 0-9 as options (I think)


#3

hi @jacquidow

this is an interesting approach but:

  • in the XS and SM viewports users will receive the dial pad instead the numeric keyboard (ok it’s not a massive UX issue)
  • it’s not 100% cross-browsers compatible

I’m confident that providing a better label and a self-explanatory placeholder will help customers to understand how to fill the control.
It’s already a great achievement, to me, to have POs and DEVs aligned in providing the same solution :slight_smile: :slight_smile:


#4

just for your information we decided to not provide any extra features (JS) to block the inputing phase.
We defined a new label and a self-expllantory (I hope) placeholder :slight_smile:
Let’s see what will happen