a label and a name walk into a bar

When is a label also an (accessible) name, when is it not and when is it neither?

WCAG definitions:

label

text or other component with a text alternative that is presented to a user to identify a component within web content

A placeholder can be an accessible name, but can never be a label

A label element can be a label when it is visible and contains text that identifies a component.

(accessible) name

text by which software can identify a component within web content to the user

A label element can be a name when it is visible and contains text that is programmatically associated with the component it identifies.

When is a label also an (accessible) name?

When it is visible text and the text is programmatically associated with the control it labels.

Example code

label element is visible, contains label text and a HTML labelable element

<label>First name
<input type="text" placeholder="Our Dave">
</label>

• label = First name
• accessible name = First name

Example code

label element is visible, and is explicitly (for/id) associated with a HTML labelable element

<label for="fname">First name</label>
<input id="fname" type="text" placeholder="Herbie">

• label = First name
• accessible name = First name

Example code

Element containing label text is visible, and is explicitly (aria-labelledby) associated with an HTML element

<label id="fname">First name</label>
<input aria-labelledby="fname" type="text" placeholder="Herbie">

<span id="fname1">First name</span> 
<input aria-labelledby="fname1" type="text" placeholder="Herbie">

• label = First name
• accessible name = First name

Example code

label element containing visible label text and a custom control which builds on a HTML labelable element

<label>First name
<input type="combobox" placeholder="Jonny">
</label>

• label = First name
• accessible name = First name

When is it not?

When it is not visible, when it is not programmatically, or only visible before data input

Example code

label text not programmatically associated

<label>First name</label>
<input type="text" placeholder="Jonny">

• label = First name
• accessible name = Jonny

Example code

label text not programmatically associated

<span>First name</span>
<input type="text" placeholder="Pattypoo">

• label = First name
• accessible name = Pattypoo

Example code

When the label element is display:none and aria-labelledby is used to associate the hidden label text with a control

<label for="fname1" class="hidden" id="poot">First name</label>
<input id="fname1" aria-labelledby="poot" type="text" 
placeholder="Bonny">

.hidden {
display:none
}

• label = none
• accessible name = First name

Example code

label element wrapped around a custom control built upon a non interactive (span) element:

<label>First name
<span tabindex="0" role="textbox"></span></label>

• label = First name
• accessible name = none

When is it neither?

Example code

Although it has the for/id attributes set, because the label element is hidden (display:none), it is neither a label or an accessible name

<label for="fname" class="hidden">First name</label>
<input id="fname" type="text" placeholder="Throater">

.hidden {
display:none
}

• label = none
• accessible name = Throater

Example code

When a placeholder attribute value is used as the only label text

<input type="text" placeholder="Little King">

• label = none
• accessible name = Little King

Code examples brought to life

See the Pen
label and name examples by steve faulkner (@stevef)
on CodePen.

Further reading

• placeholder – the piss-take label
• ARIA/HTML relationship Severance
• Not so short note on aria-label usage – Big Table Edition

Ramones – Somebody Put Something In My Drink

Somebody, somebody put something in my drink, somebody
Another night out on the street
Stopping for my usual seat
Oh, bartender, please
Tanqueray and tonic's my favorite drink
I don't like anything colored pink
That just stinks, it's not for me
It feels like somebody put something
Somebody put something in my drink
Somebody put something
Somebody put something
Blurred vision and dirty thoughts
Feel out of place, very distraught
Feel something coming on
Yeah, kick the jukebox, slam the floor
Drink, drink, drink, drink some more
I can't think
Hey, what's in this drink?
It feels like somebody put something
Somebody put something in my drink
Somebody put something
Somebody put something in my drink
Somebody put something
Somebody put something in my drink
Somebody put something
In my drink
In my drink
In my drink
In my drink
So you think it's funny, a college prank
Goin' insane for something to drink
Feel a little dry
Oh, I couldn't care what you think of me
'Cause somebody put something in my drink
I can't think
Hey, give me a drink
It feels like somebody put something
Somebody put something in my drink
Somebody put something
Somebody put something in my drink
Somebody put something
Somebody put something in my drink
Somebody put something
Somebody put something in my drink
Somebody put something (in my drink)
Somebody put something in my drink
Somebody put something (in my drink)
Somebody put something in my drink
Somebody put something (in my drink)
Somebody put something in my drink