Unlabelled search fields
Jeremy Keith
352

Great review of this. One clear winner emerges.

Seems brain dead simple to add both a title and aria-label attribute to the input itself.

This works on hover as you say, and for screen readers. Why bother with creating a separate label element and using industrial strength “visual hiding” CSS?

The only other thing I’d like to mention is that labels also help sighted users. When I (or my browser autofill) fill in the field incorrectly I can’t tell which was which. I have to delete the text to see what the placeholder says!

The “float label” pattern sounded like a good solution to this by CSS animating the placeholder into a tiny font and perching it just above the field. But in reality this turned into a battle against the browser – one in which we had to admit defeat to the back button and Chrome autofill.