super short note: placeholder perfidy

It’s a hint not a label

The placeholder attribute is defined as:

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.

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

I made the mistake in a recent article of using the placeholder attribute content to illustrate when a label is not correctly associated it does not provide an accessible name. placeholder content is used as an accessible name of last resort when other sources are absent. My motivation for using it was to include the names of my nearest and dearest friends (Dr Throater for example!) in some form as I often do, not to give people the idea to use placeholder themsleves, for anything!.

For this I am truly sorry. I did not mean to imply that it was a good idea, in fact its a really shit idea for lots of reasons.

The HTML Accessibility API Mappings 1.0 name computation for input type="text" (amongst others) details where placeholder is in the acc name source pecking order:

• If the control has an aria-label or an aria-labelledby attribute the accessible name is to be calculated using the algorithm defined in Accessible Name and Description: Computation and API Mappings.
• If the accessible name is still empty: use the text equivalent computation of the associated label element’s subtree – if more than one label is associated; concatenate their subtrees by DOM order, delimited by spaces.
• If the control is encapsulated by its label element, exclude the control’s author specified or user-entered value from its computed accessible name.
• If the accessible name is still empty: use the value of the control’s title attribute.
• If the accessible name is still empty: use the value of the control’s placeholder attribute.
• Otherwise, use the value of the element’s aria-placeholder attribute.
• If none of the above yield a usable text string there is no accessible name.

Further reading

• Providing Accessible Names and Descriptions
• placeholder – the piss-take label

Further listening: Toe Fat 1970 – Bad Side Of The Moon

This is my life, this is my life, this is my life
This is my life, this is my life, this is my life
This is my life, this is my life, this is my life
This is my life, this is my life, this is my life
This is my life, this is my life, this is my life
This is my life, this is my life, this is my life

It seems as though I've lived my life
On the bad side of the moon
To stir your dregs in sickness still
Without the rustic spoon
Come on people, live with me
Where the light never never shone
And the hermits flock like-a hummingbirds
To speak in a foreign tongue

I'm a light world away
From the people who make me stay
Sitting on the bad side of the moon
Yeah, I'm a light world away
From the people who make me stay
Sitting on the bad side of the moon

Everybody sing
This is my life, this is my life, this is my life
This is my life, this is my life, this is my life