Web Access Centre

Place-holding text in form elements - Articles - Web Access Centre

Summary: The reasoning behind if and how to use place-holding text in form elements.

• Other articles

---

Checkpoint 10.4 (priority 3) in the WAI Web Content Accessibility Guidelines 1.0 states:

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

This is one of those checkpoints which was always intended as an interim solution to a problem that existed at the time the Web Content Accessibility Guidelines were written. As far as I know, empty form controls no longer cause problems for user agents (such as browsers or screen readers), so there is no longer any particular requirement to provide place-holding characters.

In fact, they can actually cause problems for some users because of how some browsers and screen readers interact when handling place-holder text.

Contrary to normal Windows behaviour, some browser / screen reader combinations don't automatically select the text in an edit box when the element receives focus. When this happens, and the user tabs into a text edit box which already contains some text, the text isn't read out automatically, and so the user isn't aware that it exists. And then when the user starts to type the text they want to enter into the text input box, the place-holder text remains in the box along with the user's text.

For example, consider a simple text edit box labelled "Date" and pre-populated with the prompt "Enter start date". The user tabs into the box, is unaware that there is text already there, so simply types "09 September 2005". Now the box contains "09 September 2005Enter start date". But the screen reader user will only discover this if they actively direct their screen reader to select and read the content of the text edit box at some point (eg to check if they have entered the correct date).

As a result, we generally recommend avoiding the use of place-holder text.

However, some designers like to use place-holder text as an additional prompt to the user. This is fine, but we recommend using JavaScript to select the place-holder text when the text entry box receives focus, and to insert the place-holder text in the first place when the page is loaded, so that the place-holder text is absent if JavaScript is disabled or not supported.

Here's an example of one way of doing this:

<label for="textin">Search: </label>
<script type="text/JavaScript">
document.write("<input type=\"text\" id=\"textin\" value=\"Enter search keyword\" onfocus=\"this.select();\">");
</script>
<noscript>
<input type="text" id="textin" value="">
</noscript>

Donna Smillie
Senior Web Accessibility Consultant
RNIB

September 2005

Other articles

• GIS and accessibility
• Instant accessibility: does it work?

Back to Articles

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 18/12/2008 13:05