Hanna Laakso documents the problems for GOV.UK. This is what they landed on:

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

The inputmode attribute is pretty great, and we have a deep dive on that.

Phil Nash came to (almost) same exact conclusion, and blogged about improving the experience of a two-factor auth code input on the Twilio blog:

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

That last attribute is interesting and new to me. It means you get this super extra useful experience on browsers that support it:

Note: Although it is common on the web, and is in some of the images below, you should never make visible form fields without a visible label.

The results of the two studies showed that these elements of text fields were of most value:

• Enclosed text fields with a rectangular (box) shape performed better than those with a line affordance
• The text field box should be represented with a semi-transparent fill and a bottom line or with a fully transparent fill and an opaque stroke.
• Color contrast of the text field’s lines or strokes met the minimum 3:1 contrast ratios with the background
• Label text should be placed within the bounds of the text field box
• Text fields should have rounded corners

Time and time again, it seems like reaching for input type="number" is a good idea, but it almost always isn’t. While input type="number triggers numeric keyboards on touchscreens leading to better mobile UX, that can also be accomplished by configuring the pattern attribute in a certain way (Zach Leatherman has a great deep dive post into all of this).

User Preference of Error Message Locations

Users rated which error message location they found most satisfying. There was a strong user preference and expectation for right of the field placement.

Error messages placed to the left of the field were rated the worst. Error messages placed above the field caused the highest cognitive load followed by error messages below the field.

In 2008, I worked on Boots.com. They wanted a single-page checkout with the trendiest of techniques from that era, including accordions, AJAX and client-side validation.

Each step (delivery address, delivery options and credit-card details) had an accordion panel. Each panel was submitted via AJAX. Upon successful submission, the panel collapsed and the next one opened, with a sliding transition.

Something that comes up again and again in front-end accessibility is the issue of links versus buttons. You know, the HTML elements that open links in new windows or submit forms?

A simple and easy to customize contact form.