Chapter #67. Write Clear Labels for Controls

Another small change you can make, which will make the world of difference to your users using assistive technologies, is writing clear labels:

Bad:

Good:

Pre-filling your field with "placeholder" (or "watermark") text may look tidy, but it's not supported in all browsers, and disappears when the focus moves to the input field.

You can, however, include both, which allows the field to be identified and gives some assistance to users as to the kind of information that is needed for that input.

An input with a clear label and a helpful watermark

I know I've tapped a field many times, planning to type some information in, only to stop and think, "Wait, what was this field for?" Yet again, this is an example of improving accessibility (screen readers use labels to make forms usable), while also improving the overall experience for your whole audience.