Form Labels: Why Placeholders Are Not Labels

A rampant web design antipattern is omitting <label> elements and using the placeholder attribute instead to create a 'clean, minimal' form input.

Why Placeholders Fail Accessibility and Usability:

1. They Disappear on Focus: The moment a user types one letter, the placeholder vanishes. Users with cognitive disabilities, memory impairments, or distractions forget what field they are editing.
2. Poor Color Contrast: Most default browser placeholder text fails the WCAG 4.5:1 color contrast ratio requirement.
3. Inconsistent Screen Reader Support: Many screen readers do not announce placeholders as accessible names.

The Bulletproof Standard: Always use an explicit <label for="email-input">Email Address</label> bound programmatically to <input id="email-input">. Clicking the label also expands the click target by focusing the input!