Placeholders vs labels

[danielnixon]

Re #15327, I don't think HTML5 placeholders are enough.

Should

<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

be more like

<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="you@example.com" aria-label="Username" aria-describedby="basic-addon1">

or even

<label for="username" class="sr-only">Username</label>
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" id="username" class="form-control" placeholder="you@example.com" aria-describedby="basic-addon1">

? See e.g. MDN or The HTML5 placeholder attribute is not a substitute for the label element or Placeholders are not Substitutes for Labels.

[mdo]

/cc @patrickhlauke

[cvrebert]

But the user cannot change the cents field, it's always zero cents, so that nitpick doesn't seem right.

[danielnixon]

D'oh, you're right.

[patrickhlauke]

In the first example, the input is not an email address, but a twitter user name. the field is prefixed with the visible "@". placeholder="Username" is correct in this context.
As the placeholder attribute is exposed to assistive technologies (in case other methods, like a proper <label>, an aria-label, aria-labelledby or title are not present) as an accessible name, it functions in exactly the same way in this case as the proposed additional aria-label.
The major objections to using placeholder as a form of labelling are usability-related. In an ideal world devs would always provide a visible <label>, but when they decide not to, the above pattern is appropriate (and works well for assistive technologies too).

[patrickhlauke]

Related though, perhaps it's worth adding an example that shows the use of an <input> with an .input-group-addon, but also a proper <label> ... will slot that on my to-do list

[mdo]

Going to punt on this, though if you wanted to do a label variation for the docs @patrickhlauke, I'm not against it.