Avoid Messages Under Fields

Sometimes we fail to consider how browser features can jack up our interfaces. This is neither good nor bad, but we do need to account for it.

My argument here is simple. Avoid putting important actionable or informational text exclusively below form fields. This includes labels, hints, and error messages. Here is why:

• Auto-complete features in browsers obscure them.
• On-screen keyboards can obscure them.
• Depending on how you programmatically associate this text with form fields, it may be an anti-pattern to announce afterward in screen readers.

There are exceptions, of course. But that is why I use the word avoid and not the word don’t.

One way to mitigate this can be as simple as pushing the text a bit to the left (for left-to-right languages like most Western languages) as the auto-complete menu does not appear to ever go further left than the edge of the field. Another way could be to use an additional indicator of content, or even duplicate some important parts of content (as some of us already do with error messages first in an overall list and then per field). I leave it to readers to identify a solution best suited to their designs, users, and needs.

Demo Form

I made a sample form with common fields that for all of my browsers already have auto-complete data. You can load the debug version in your browser of choice, as it gets rid of all the CodePen script.

See the Pen Sample Form by Adrian Roselli (@aardrian) on CodePen.

Screen Shots

I have gathered screen shots from a handful of browsers immediately at my disposal while procrastinating in a cafe.

Desktop Browsers

Mobile Browsers

Wrap-up

This is not a big issue, but with some careful attention to detail you can make forms on your site a little more user friendly (or less user unfriendly). Consider if there are other elements on your site that can benefit from accounting for built-in browser features.

Update: 11 April 2017

I ran into a variation on this example in the real world while ordering stuff online. When your below-the-field informational text becomes the error message, then things can get annoying pretty quickly. Hilariously, I experienced both the examples below on the same field, the second time as a result of reloading the page to try to see the hint text and clicking to avoid over-tabbing.

Update: 4 May 2022

Chromium and Firefox browsers display the default / native error messages below fields. In Chromium browsers, those messages go away after 5 seconds. Add browser auto-complete and hints into the mix, and you get some problematic interfaces. My general advice is to avoid default field validation. Then you get to choose where to put the message.