HTML5 Accessibility Chops: the placeholder attribute

Posted on Friday, 18 February 2011 by Steve Faulkner

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">

About Steve Faulkner

Steven is the Senior Web Accessibility Consultant and Technical Director, TPG Europe. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at Vision Australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C HTML Working Group and the W3C Protocols and Formats Working Group. He is an editor of several specifications at the W3C including HTML 5.1, Using WAI-ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility

Comments

  1. 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.

  2. 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.

  3. 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).

  4. 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…

Comments are closed.

Recent Posts

See all posts in the blog archive

Amazing. You accomplished in a matter of months what we were not able to do in years with teams of people. We now are on the way to having a fully usable interface for all our clients, regardless of their ability.

Gary Moulton, Accessibility Program Manager, Yahoo!