Wcag: Does using the placeholder with a value alone pass 3.3.2 Labels or Instructions?

Created on 19 Aug 2019  路  4Comments  路  Source: w3c/wcag

According to 'Applicability of 2.5.3 Label in Name when no label is present (or just placeholder) #855' (https://github.com/w3c/wcag/issues/855) @detlevhfischer says

"When, say, a search field has no label (placeholder only) which already leads to a FAIl 3.3.2 Labels or Instructions".

But is this correct?

Accessible Name and Description calculation
The placeholder attribute is included in the 'Accessible Name and Description calculation' (https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_te).

  • Use aria-labelledby
  • Otherwise use aria-label
  • Otherwise use the associated label element
  • Otherwise use the placeholder attribute
  • Otherwise use the title attribute
  • If none of the above yield a usable text string there is no accessible name

Does this mean that the placeholder value alone, if sufficiently descriptive and meets contrast ratio requirements, does pass 3.3.2 Labels or Instructions?

Placeholder Research
The website 'Placeholder Research' (https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research) states conclusively the placeholder is not an alternative to a label, for example:

"Placeholder Attribute Is Not A Label!"
https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research#Placeholder_Attribute_Is_Not_A_Label.21

Placeholder text"placeholder text is not a replacement for labels"https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research#Placeholder_text

The following documents do not include any reference to 'Placeholder' text

Labels or Instructions: Understanding SC 3.3.2
https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html

Documents linked from the Understanding document and also linked to the 'How to meet' document for the SC as 'Sufficient techniques' do not reference 'placeholder'.

Techniques and Failures for Success Criterion 3.3.2 - Labels or Instructions
w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html#minimize-error-cues-techniques-head

There is reference to the 'title' attribute which incidentally is the last option that should be relied upon in the 'Accessible Name and Description calculation' and appears after 'placeholder' as part of the computation.

H65: Using the title attribute to identify form controls when the label element cannot be used
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H65

I am looking for specific documentation that states 'placeholder' text alone is insufficient to meet 3.3.2 Labels or Instructions.

Most helpful comment

The definition note from "label" indicates:
NOTE
A label is presented to all users whereas the name may be hidden and only exposed by assistive technology. In many (but not all) cases the name and the label are the same.

A placeholder alone is not sufficient to meet SC 3.3.2 for labels - primarily because the label is not persistent. My browser fills many fields and it pre-fills fields and the placeholder is not shown. Often the data it prefills is for the wrong field but I have no idea because there is no visual label.

All 4 comments

accessible name calculation alone is fairly irrelevant for 3.3.2 for non-AT users. for a sighted non-AT user, once they encounter a filled-in form field using only placeholder (or they filled it in themselves, and return to it later), they have no visible label or instruction anymore. which is why it fails 3.3.2 to rely solely on placeholder.

Got it thanks again @patrickhlauke

The definition note from "label" indicates:
NOTE
A label is presented to all users whereas the name may be hidden and only exposed by assistive technology. In many (but not all) cases the name and the label are the same.

A placeholder alone is not sufficient to meet SC 3.3.2 for labels - primarily because the label is not persistent. My browser fills many fields and it pre-fills fields and the placeholder is not shown. Often the data it prefills is for the wrong field but I have no idea because there is no visual label.

@mraccess77 that makes a lot of sense in real world terms.

Was this page helpful?
0 / 5 - 0 ratings