Use <label>s rather than placeholders

[mpchadwick]

Per #353 (comment) the solution proposed in #353 isn't really a great one. This approach simply swaps out the placeholders for <label>s. It would probably be a good idea to update this image if this feature is merged.

[jelmer]

Can you provide some background on this, why are labels better than placeholders?

[jelmer]

ping @mpchadwick

[mpchadwick]

@jelmer I had outlined the reasoning here... #353 (comment)

Placeholders are is meant to be a hint (an example input) for the user about what to enter into the field, but shouldn't be used in lieu of a <label>. Per the links I included if using a placeholder they should be used something like this...

<label for="postbox__author">Name (optional)</label>
<input id="postbox__author" type="text" name="author" placeholder="John Smith" value="">

[mpchadwick]

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.

Source: https://developer.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/