Don’t put ‘Search’ in a search box

December 20, 2010

It is noticeable when observing user testing sessions, that some users are reluctant to enter text in search boxes if it already contains some text e.g. the word ‘Search’. Our advice is that, like Google, the search box should be empty. However, we are often told by clients, with words in their search boxes, that they have been advised this is necessary to comply with accessibility guidelines.

This is incorrect. In fact the accessibility advice is the same as the usability advice on this point, you are better off without the place-holding text. It is likely that our clients are being confused by the WCAG v1.0 checkpoint that says:

“10.4 Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas.”

The keywords here being ‘Until user agents handle empty controls correctly’. They now do, so this checkpoint is obsolete – it has been removed from WCAG v2.0. However, what is necessary is provide an explicit label for each form field. For those that want to know how it is done, use the label tag like this:

<label for=”search”>Search this site: </label><input type=”text” id=”search” name=”search_field” />

Note that the ‘for’ attribute in the label tag must match the id attribute of the input field.