Fix placeholders used as labels

A placeholder is a hint, not a label. It vanishes on input and is often low contrast.

People forget what the field asked for.

Steps

  1. Find fields whose only name is the placeholder.
  2. Add a visible label.
  3. You can keep a short example as the placeholder.

Failing example

The field shows only placeholder Email.

Better example

The label is Email address and the placeholder is [email protected].

Shopify

Add a real label beside Shopify newsletter and search fields. Keep the placeholder only as an example.

WooCommerce

Do not remove WooCommerce checkout labels and rely on placeholders.

WordPress

Set the WordPress form label and leave it visible.

Wix

Give each Wix field a visible title.

WCAG

Shopify steps · Shopify · Missing alt text