/ lab / experiments / forms / input-placeholder-text

Input Placeholder Text – JavaScript selection versus clearing and related notes

Last updated: October 26, 2009

This experiment is getting a bit old now. I might come back to it for some actual user testing soon.

The most useful thing to most visitors right now is probably the JavaScript I wrote to handle the placeholder text. There are notes in that file to show you how it is used. The license on this code is “take it, use it however you like”.

There are also a few notes below discussing whether or not form placeholder text is really useful or not, and whether or not it should actually be a requirement to meet WCAG.


Testing the following things:

Questions to answer for screen readers and, particularly, Braille devices:

  1. Do title attributes on the input elements get conveyed to the user? (would depend on screen reader settings)
  2. Does the selected placeholder text get conveyed to the user?
  3. Does the selected placeholder text get over-written when the user types?
  4. Does the cleared placeholder text get conveyed to the user before it is cleared?
  5. What happens when JavaScript is not available? (expect title attribute to be read to user, but would depend on screen reader settings)
  6. How does a user cope when no placeholder text is used?

Additional notes and thoughts:

Test Form

Please note: the following form does not yet submit to anywhere.

Test 1: Using JavaScript to select placeholder text

If JavaScript is available and placeholder text is set and will be selected when the input box receives focus. The user should then be able to type in the box, replacing the placeholder text. The placeholder text should still be available to assistive software while it is selected (for example, it should still be read out by screen readers).

Test 2: Using JavaScript to clear placeholder text

In this test, the placeholder text is cleared from the input box instead of being selected. This difference could mean that the placeholder text does not get passed to assistive software and to the user.

Test 3: No placeholder text (title attribute set)

Some people prefer not to have placeholder text at all. However, a helpful prompt is still available in the title attribute, but no placeholder text should be set, even if JavaScript is available.

Test 4: Classic placeholder text without JavaScript

Placeholder text is set as a value of the input within the HTML rather than by JavaScript, leaving behaviour up to the browser default. For example, in Firefox the text input should select any text when it receives focus, but when the text area receives focus, the cursor will simply go to the end of the placeholder text.