When a screen reader user navigates to a form element it's important that they know what it's for and what information is needed from them. This information is given to them through the label. Without this information it will be impossible to complete the form.

Placeholder text is not an adequate alternative to a label because not all screen readers will read them. Placeholder text also goes away once you start typing which can be confusing to users with cognitive issues.

WCAG 3.3.2: Labels or Instructions Opens in a new window

Details

  • Every form element has a label.
  • All form elements should be explicitly labeled using the for attribute, whether or not the label wraps it.
  • Whenever possible the label should be visual, this does not include placeholder text.

Examples

Tools & Resources