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:

edit box with a label 'address' to the left and placeholder text 'john@example.net' in the edit area.

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">
Categories: Technical
Tags:

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.

Comments

I think it would make sense to expose the @placeholder attribute to AT such that e.g. screenreaders can read it out while the user is tabbing onto the input element. It could even be read out again while the user is considering what to put in if the user activates some kind of “help” key. It seems to be very useful information that should not be ignored by AT.

Steve Faulkner says:

Hi Silvia,

“I think it would make sense to expose the @placeholder attribute to AT”

This is what browsers are doing and what I have suggested and am specifying in the HTML to platform accessibility API implementation guide. Issues arise when there is multiple sources for a form controls accessible name and accessible description and/or when implementation across browsers differ.

Anonymous Cow says:

In terms of styling, using:


Name:

You could then style it such that the label has “visibility: hidden” when input is not focused. That is, by default you see the placeholder, but when you don’t you see the label.

Anonymous Cow says:

OK, so my tags get stripped, even in a code block. Basically, the example read: label “name” followed by input “name” with a placeholder also set to “name”. (Really like any of the already given examples).

Some big ecommerce websites already use placeholder (or a js implementaion) in place of label. I agree with you, they’re completely wrong! When you start typing, you won’t see anymore the hint! And it’s even worst when you have some form errors…