Using @placeholder on input

From WCAG WG

Technique Category

Status

User agent and assistive technology support notes

Supported in Chrome 17, Firefox 11, Opera 11 and Safari on Windows. In Chrome 18, Firefox 13, Opera 11 and Safari on Mac OS.

Supported in Jaws 13 in Internet Explorer 9... TBC.

Description

The objective of this technique is to use the placeholder attribute to assist users with data entry. The placeholder attribute is applied to the input element, and must have a value that is a short hint, word or phrase.

The placeholder attribute is not a substitute for the label element. Placeholder text can help people with cognitive disabilities see an example of the type of data they can enter. Placeholder text disappears visually when the input field is given focus, so the information is not persistent.

Examples

Example 1: A text input field

The text input field in the example below is for a product search. The placeholder attribute is used to provide a helpful hint.

<label for="search">Search for a product:</label> <input type="text" id="search" placeholder="For example apples, bread or milk">

Related techniques

G131: Providing descriptive labels

Tests

Procedure

  1. Identify the purpose of the input field.
  2. Check the label element is present and correctly associated with the input field.
  3. Check the placeholder text provides additional help for completing the input field.

Expected results

  • Checks 2 and 3 are true.

LW Note: Not sure whether the label check can/should be included here?