Form Labels - Bad Example

This example demonstrates common form labeling mistakes that create accessibility barriers for users with disabilities.

Full Name:
Preferred Contact Method:
Email
Phone

Accessibility Issues

  • Form controls have no associated labels, so screen readers cannot identify what each field is for
  • Using placeholders as labels is not accessible as they disappear when users start typing
  • Radio buttons lack proper grouping with fieldset and legend, making it unclear they are related options
  • Non-semantic span elements are used instead of proper label elements
  • No additional context or help text is provided for users who need more information

How to Test for the Issue

  • Navigate the form with only a keyboard to see that you cannot determine what each field is for
  • Use a screen reader to observe that it does not announce the purpose of each form control
  • Notice how placeholders disappear when you start typing, leaving no context for the field
  • Observe that radio buttons are not properly grouped or labeled for screen reader users
  • Try to understand the form structure without visual cues to experience the confusion

WCAG Related Criteria

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text
  • 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input
  • 4.1.2 Name, Role, Value: For all user interface components, the name and role can be programmatically determined