Form Labels - Good Example

This example demonstrates proper form labeling and association with form controls, making forms accessible to all users including those using screen readers and keyboard navigation.

Enter your first and last name
Optional: Enter your phone number

Accessibility Features

  • Each form control has an associated label using the for attribute that creates a programmatic relationship
  • Unique IDs are used for each form control that match their corresponding labels
  • Radio buttons are properly grouped with a fieldset and descriptive legend
  • Additional context is provided via aria-describedby for complex fields
  • Required fields are marked with the required attribute for screen reader announcement

How to Test for Accessibility

  • Navigate through the form using only the Tab key to ensure all fields are reachable
  • Use a screen reader to verify that each field's purpose is announced when focused
  • Check that radio button groups are properly announced as related options
  • Verify that help text is read when navigating to fields with aria-describedby
  • Test that required fields are announced as required by screen readers

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