Workshop Registration

Enter your full name.
Enter a valid email address.
Example: 860-555-1212
Enter a 10-digit phone number.
Workshop choice (required)
Choose a workshop.
Share anything you would like the event team to know.

Registration complete

You’re registered for your workshop.

What to Notice

  1. Before submitting, what does the form tell you about each field?
  2. Which information is required?
  3. Which controls belong together?
  4. After an error, can you tell exactly what needs to change?
  5. What valid work did the form preserve?
  6. How easy is it to correct the problem and continue?

Under the Hood

Label and input 
<label for="full-name">Full name (required)</label>
<input id="full-name" name="full_name" required>

The label identifies the control, while the native required attribute communicates required state.

Related controls 
<fieldset>
    <legend>Workshop choice (required)</legend>
    ...
</fieldset>

The legend supplies context for the related radio buttons.

Instructions and errors 
<input aria-describedby="phone-error" aria-invalid="true">
<div id="phone-error">Enter a 10-digit phone number.</div>

Helpful relationships exist in the interface when the user needs both context and a clear recovery path.

Next step

You’ve now seen how structure, controls, and forms communicate before and after an interaction. Next, use those same questions to begin your individual accessibility review.

Open Challenge 05