HTML5 Accessibility Chops: the placeholder attribute

The placeholder attribute:

The placeholder attribute can be used to place text inside an empty input type="text" or textarea, the text is removed when the element receives focus.

Placeholder browser accessibility support tests updated: 31/10/2013

What the HTML5 specification says:

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry.

The placeholder attribute should not be used as an alternative to a label.

HTML code example:

<label>Address: <input type="email" name="address"
placeholder="john@example.net"></label>

Default Display Example:

Accessibility Issues?

Placeholder text colour

The default colour of the placeholder text, in browsers that support placeholder, is not of sufficient contrast with its default background colour. Sufficiency is measured using the WCAG 2.0 criteria 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. There are a number of tools you can use to check contrast ratio.

Recommendations:

If you choose to use the placeholder attribute be aware its support across browsers is incomplete and its styling support is still experimental. Apply a style to the placeholder attribute text that has a contrast ratio of at least 4.5:1.

CSS code example:

To target the placeholder text  it is currently required that browser specific CSS extensions are used:

input::-webkit-input-placeholder {
    color:    #626262;
}
input::-moz-placeholder {
    color:    #626262;
}

Placeholder as an alternative to a label

HTML code example:

<input type="email" name="address" placeholder="address">

Placeholder text disappears when a text box receives focus:

• For keyboard users this can be problematic as they must read ahead of current focus when filling in forms.
• Users, especially those with memory impairments will not have the text label available for reference at the same time as filling in a field.

Other issues with placeholders

• Users may think a text field is already filled in and skip over it. Data suggests that this can be an issue.
• If the placeholder hint text is useful information it should be available while the user is filling in the field.

Recommendations:

Use placeholder for what it is intended for, not what the HTML5 conformance criteria permits.

The HTML5 specification says “placeholder should not be used as an alternative to a label.” But it stops short of saying it MUST NOT be used, so it is conforming to use it as an alternative in HTML5 and will be used as a label. To this end  browsers are using the content of the placeholder attribute, in the absence of a label, as the accessible name exposed to accessibility APIs. This does not mean that that it should be used as a text field label. Always provide an explicitly associated text label for a text field, using either the label element or the title attribute. Use placeholder for what it is intended for, not what the HTML5 conformance criteria permits.

HTML code examples:

<label>Address: <input type="email" name="address"
placeholder="john@example.net"></label>

<label for="address">Address: </label>
<input type="email" name="address" id="address" placeholder="john@example.net">

<input type="text" title="search"  placeholder="enter search term">
<input type="submit" value="search">