Form submission errors are clearly communicated

A form that displays validation errors as inline red text — but does not announce them to assistive technology — leaves screen reader users in a silent loop: they submit the form, receive no feedback, and submit again, never understanding why their submission fails. WCAG 2.2 SC 3.3.1 (Error Identification) requires error fields to be identified programmatically. SC 3.3.3 (Error Suggestion) requires that suggestions for correction be provided when the format is known. SC 4.1.3 (Status Messages) requires status messages to be programmatically determinable. Section 508 2018 Refresh 502.3.14 covers status change announcements. The aria-describedby link between an error message and its input is the mechanism that allows a screen reader to read the error when the user focuses the invalid field.

Implement a two-part error communication strategy: an aria-live error summary that announces on submission failure, and per-field aria-describedby links that surface the error when the field receives focus.

const ContactForm = () => {
  const [errors, setErrors] = useState<Record<string, string>>({});
  const summaryRef = useRef<HTMLDivElement>(null);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const newErrors: Record<string, string> = {};
    if (!email) newErrors.email = 'Email address is required.';
    if (!message) newErrors.message = 'Message cannot be empty.';

    setErrors(newErrors);
    if (Object.keys(newErrors).length > 0) {
      // Move focus to summary so screen reader announces it
      summaryRef.current?.focus();
    }
  };

  return (
    <form onSubmit={handleSubmit} noValidate>
      {Object.keys(errors).length > 0 && (
        <div
          ref={summaryRef}
          role="alert"
          aria-live="assertive"
          tabIndex={-1}
        >
          <h2>Please fix {Object.keys(errors).length} error(s):</h2>
          <ul>
            {Object.entries(errors).map(([field, msg]) => (
              <li key={field}><a href={`#${field}`}>{msg}</a></li>
            ))}
          </ul>
        </div>
      )}

      <label htmlFor="email">Email</label>
      <input
        id="email"
        type="email"
        aria-required="true"
        aria-invalid={!!errors.email}
        aria-describedby={errors.email ? 'email-error' : undefined}
      />
      {errors.email && (
        <p id="email-error" role="alert">{errors.email}</p>
      )}

      <button type="submit">Send</button>
    </form>
  );
};