Accessible Forms Pattern

<form novalidate>
  <!-- Text input with label and error -->
  <div class="form-group">
    <label for="full-name">
      Full name <span class="required" aria-hidden="true">*</span>
    </label>
    <input type="text" id="full-name" name="full-name"
           required aria-required="true"
           autocomplete="name">
    <div class="form-error" id="full-name-error" role="alert">
      Please enter your full name.
    </div>
  </div>

  <!-- Email with hint text -->
  <div class="form-group">
    <label for="email">
      Email <span class="required" aria-hidden="true">*</span>
    </label>
    <span class="form-hint" id="email-hint">
      We'll use this to send your confirmation.
    </span>
    <input type="email" id="email" name="email"
           required aria-required="true"
           aria-describedby="email-hint"
           autocomplete="email">
    <div class="form-error" id="email-error" role="alert">
      Please enter a valid email address.
    </div>
  </div>

  <!-- Select dropdown -->
  <div class="form-group">
    <label for="topic">Topic</label>
    <select id="topic" name="topic" required>
      <option value="">Select a topic...</option>
      <option value="general">General inquiry</option>
      <option value="bug">Bug report</option>
    </select>
  </div>

  <!-- Radio group in fieldset -->
  <fieldset>
    <legend>Priority</legend>
    <div class="radio-option">
      <input type="radio" id="low" name="priority" value="low">
      <label for="low">Low</label>
    </div>
    <div class="radio-option">
      <input type="radio" id="medium" name="priority" value="medium">
      <label for="medium">Medium</label>
    </div>
  </fieldset>

  <!-- Checkbox group in fieldset -->
  <fieldset>
    <legend>Notifications</legend>
    <div class="checkbox-option">
      <input type="checkbox" id="notify-email" name="notify">
      <label for="notify-email">Email notifications</label>
    </div>
  </fieldset>

  <button type="submit">Submit</button>
</form>

/* Labels */
label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.required {
  color: #b91c1c;
}

/* Inputs */
input[type="text"],
input[type="email"],
select,
textarea {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  /* SC 2.5.8: minimum 24x24 target */
  min-height: 2.75rem;
}

/* Focus: visible ring, not just color */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
  outline: none;
}

/* Error state: border + aria-invalid */
input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: #b91c1c;
}

input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}

/* Error message */
.form-error {
  color: #b91c1c;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Fieldset for grouping */
fieldset {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
}

legend {
  font-weight: 600;
  padding: 0 0.25rem;
}

/* Radio/checkbox sizing: meets SC 2.5.8 */
input[type="radio"],
input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
}

const form = document.getElementById('my-form');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  let firstError = null;

  // Validate each required field
  form.querySelectorAll('[required]').forEach(input => {
    const errorEl = document.getElementById(
      `${input.id}-error`
    );

    const isEmpty = input.type === 'radio'
      ? !form.querySelector(`[name="${input.name}"]:checked`)
      : !input.value.trim();

    if (isEmpty) {
      // Mark invalid and show error
      input.setAttribute('aria-invalid', 'true');
      input.setAttribute('aria-describedby',
        [input.getAttribute('aria-describedby'), `${input.id}-error`]
          .filter(Boolean).join(' ')
      );
      errorEl.classList.add('is-visible');
      if (!firstError) firstError = input;
    } else {
      // Clear error state
      input.removeAttribute('aria-invalid');
      errorEl.classList.remove('is-visible');
    }
  });

  if (firstError) {
    // Focus the first invalid field
    firstError.focus();
  } else {
    // Form is valid — submit
    console.log('Form submitted');
  }
});