Accessible Forms: The Basics Developers Should Get Right

This is an excerpt highlighting this stage’s focus, not a complete form. Existing attributes are retained. Use the complete HTML and JavaScript examples below to run it.

<input id="forms-email" type="text" placeholder="Email address">
<input id="forms-password" type="password" placeholder="Password">

<label for="forms-email">Email address</label>
<input id="forms-email" type="text">
<label for="forms-password">Password</label>
<input id="forms-password" type="password">

<label for="forms-email">Email address (required)</label>
<input id="forms-email" type="text" required>
<label for="forms-password">Password (required)</label>
<input id="forms-password" type="password" required>

<label for="forms-password">Password (required)</label>
<p id="forms-password-hint">Use at least 12 characters.</p>
<input id="forms-password" type="password" required aria-describedby="forms-password-hint">

<input id="forms-email" type="email" required autocomplete="email">
<input id="forms-password" type="password" required aria-describedby="forms-password-hint" autocomplete="new-password">

<form id="forms-basics-form" novalidate>
  <!-- Fields and controls omitted; see the complete example. -->
<p id="forms-email-error" class="field-error" hidden></p>
<p id="forms-password-error" class="field-error" hidden></p>
</form>

Stage 1 shows the starting inputs. Stage 6 shows novalidate and the error containers; submit the form to inspect generated error associations in the current HTML below.

This is the complete form’s initial markup. Validation adds feedback and attributes after submission. Include the JavaScript below to run it locally; the HTML alone does not prevent navigation or implement the demonstration checks.

This is the actual shared form handler for all six stages, including the deliberately poor feedback in Stages 1–5. After adding the HTML, call connectForm(document.querySelector('#forms-basics-form'), STAGE_NUMBER), replacing STAGE_NUMBER with the selected number. Run this code in a module script. Stage 6 uses one custom validation flow; earlier stages also use browser constraint validation.

Errors are checked on submission, rather than announced while typing. Submit again after making corrections. On failure, Stage 6 focuses a summary with field links; on success it focuses a confirmation. There is no duplicate live-region announcement.

// Run after inserting the selected stage's HTML. All values remain in the DOM.
// No request, storage, logging, or real account creation takes place.
export function connectForm(form, stage) {
  const email = form.querySelector('#forms-email');
  const password = form.querySelector('#forms-password');
  const feedback = form.querySelector('#forms-feedback');
  const fields = [email, password];

  function clearFeedback() {
    feedback.hidden = true;
    feedback.replaceChildren();
    fields.forEach((field) => {
      field.removeAttribute('aria-invalid');
      if (field === password && stage >= 4) {
        field.setAttribute('aria-describedby', 'forms-password-hint');
      } else {
        field.removeAttribute('aria-describedby');
      }
      const error = form.querySelector(`#${field.id}-error`);
      if (error) {
        error.hidden = true;
        error.textContent = '';
      }
    });
  }

  form.addEventListener('reset', clearFeedback);
  // Keep Stage 6 errors until the next submit; hide an outdated success message.
  form.addEventListener('input', () => {
    if (!form.querySelector('[aria-invalid]')) clearFeedback();
  });
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    clearFeedback();
    // In Stages 3–4 the browser blocks empty required fields before this event.
    // Stage 5 also blocks malformed email. There is no native minlength rule.
    // Other failures still reach the intentionally generic feedback below.
    // Stage 6 uses novalidate so this handler manages every submission error.
    const errors = [];
    if (!email.value.trim()) {
      errors.push([email, 'Enter your email address.']);
    } else {
      // Use the browser's email syntax check even in the early text-input stages.
      const emailCheck = document.createElement('input');
      emailCheck.type = 'email';
      emailCheck.value = email.value;
      if (!emailCheck.validity.valid) {
        errors.push([email, 'Enter an email address such as learner@example.com.']);
      }
    }
    if (!password.value) {
      errors.push([password, 'Enter a password with at least 12 characters.']);
    } else if (password.value.length < 12) {
      errors.push([password, 'Use at least 12 characters for your password.']);
    }

    feedback.hidden = false;
    if (errors.length && stage < 6) {
      // Intentionally poor error handling for comparison. No focus or association.
      feedback.textContent = 'Invalid input.';
      return;
    }
    if (errors.length) {
      const heading = document.createElement('h4');
      heading.textContent = `Account not created: correct ${errors.length} ${errors.length === 1 ? 'error' : 'errors'}.`;
      const list = document.createElement('ul');
      errors.forEach(([field, message]) => {
        const error = form.querySelector(`#${field.id}-error`);
        error.textContent = message;
        error.hidden = false;
        field.setAttribute('aria-invalid', 'true');
        const description = field === password ? 'forms-password-hint ' : '';
        field.setAttribute('aria-describedby', description + error.id);
        const link = document.createElement('a');
        link.href = `#${field.id}`;
        link.textContent = message;
        link.addEventListener('click', (event) => {
          event.preventDefault();
          field.focus();
        });
        const item = document.createElement('li');
        item.append(link);
        list.append(item);
      });
      feedback.append(heading, list);
    } else {
      feedback.textContent = 'Demo complete. Your entries passed the checks. No account was created and nothing was sent.';
    }
    // One notification strategy: focus the summary or confirmation, no live region.
    feedback.focus();
  });
}