#24 A placeholder is not a label

submitted on by Manuel

Bad code

<input type="text" placeholder="First name">

Issues and how to fix them

  1. Every form input element needs a label. When screen reader users access a form field, the label is announced with the field type (e.g. first name, edit text). If it’s missing, users might not know what they’re supposed to fill in (e.g. edit text).
  2. Some screen readers fall back to placeholder as the label, but it’s not recommended to rely on it.
  3. By default, placeholder text is displayed in a light grey color with low contrast. It might not be readable for people with low vision or under certain conditions, like strong sunlight.
  4. It’s possible to increase contrast by using the ::placeholder pseudo element, but if contrast is too high, users may mistake a placeholder for data that was automatically filled in.
  5. Using and displaying a <label> increases the target size of the form field which can be of great help, especially on touch devices.
  6. If placeholder functions as the only label, the label disappears when the user types. This strains their short-term memory, especially on complex or rarely used forms.
  7. Users cannot check what they’ve filled in before submitting a form, because they only see values and no labels.
  8. If browsers auto-fill fields, users have to cut-and-paste auto-filled values to check if browsers filled in fields correctly.
  9. Placeholder text is cut off if it goes beyond the size of the field.
  10. Translation tools like Google Translate might not translate attribute values.
  11. Labels work best when they’re placed above the corresponding text field, not in the field.

Check out the resources section at the bottom of this page for more.

Good code

 <label for="firstname">First name</label>
 <input type="text" id="firstname">

Resources