Placeholders are not labels

01Why placeholder-as-label fails

A placeholder is the grey text shown inside an empty field. Some forms use it instead of a label to save space. The result looks clean but causes several problems for real users.

• It disappears. Once the person starts typing, the prompt is gone. They cannot check what the field asked for.
• Low contrast. Placeholders are usually styled light grey. Text still needs a 4.5:1 contrast ratio to meet WCAG AA, and many default placeholders fall short.
• Memory load. In a long form, people must remember every field’s meaning after they fill it, which makes review and correction harder.
• Not a reliable accessible name. Support for placeholders as names varies, and a field may be announced inconsistently by assistive technology.

Autofill makes the problem worse: when a browser fills a field, the placeholder vanishes and nothing remains to say what the value is for.

02Use a persistent label

Put a visible label above or beside every field and connect it with the <code>for</code> attribute and the field’s <code>id</code>. Clicking the label then focuses the field, which also enlarges the touch target.

Label text should be short and specific: “Email address”, “Phone number”, “Postal code”.

Label says what the field is. Hint says how to fill it in.

• Keep the label visible in every state: empty, focused, filled and error.
• Mark optional fields with “(optional)” instead of marking every required one with an asterisk.
• Write error messages next to the field and name the field in the message.

03Add hint text when needed

Hint text sits between the label and the field, or just below the field, and stays visible while typing. Use it for format, limits and examples.

• Format

  Label “Date of birth”, hint “For example, 15 03 1995”

• Limit

  Label “Username”, hint “3 to 20 characters, letters and numbers only”

Connect the hint to the field with <code>aria-describedby</code> so assistive technology reads it together with the label.

04Floating labels and good placeholder use

Floating labels start inside the field and move above it when the field is focused or filled. They keep the label visible, but they have trade-offs: the label is small once it moves, a long label may be cut off inside the field, and the pattern adds animation and implementation complexity. A plain label above the field is simpler and more robust.

• If you use a placeholder, keep it to a short example, such as “name@example.com”, and make sure it is not the only source of information.
• Never put essential instructions or required formats only in a placeholder.

05Sources

• W3C. Web Content Accessibility Guidelines (WCAG) 2.2, 1.4.3 Contrast (Minimum) and 3.3.2 Labels or Instructions. https://www.w3.org/TR/WCAG22/