Accessible Forms — Dynamic Forms, Complex Patterns and WCAG 2.2 Compliance

<form name="registration" aria-label="Account registration">
  <label for="reg-email">Email address <span aria-hidden="true">*</span></label>
  <input type="email" id="reg-email" name="email" required
         aria-required="true" autocomplete="email"
         aria-describedby="reg-email-hint reg-email-error"
         aria-invalid="false">
  <p id="reg-email-hint">We will send a confirmation to this address</p>
  <p id="reg-email-error" role="alert"></p>

  <label for="reg-password">Password <span aria-hidden="true">*</span></label>
  <input type="password" id="reg-password" name="password" required
         aria-required="true" autocomplete="new-password"
         aria-describedby="reg-password-rules reg-password-error"
         aria-invalid="false"
         minlength="8">
  <ul id="reg-password-rules">
    <li>At least 8 characters</li>
    <li>One uppercase letter</li>
    <li>One number</li>
  </ul>
  <p id="reg-password-error" role="alert"></p>

  <div id="form-status" role="status" aria-live="polite"></div>
  <button type="submit">Create account</button>
</form>

<script>
function validateForm() {
  const errors = [];
  const email = document.getElementById('reg-email');
  const password = document.getElementById('reg-password');

  if (!email.value.includes('@')) {
    errors.push({ field: email, message: 'Enter a valid email address' });
  }
  if (password.value.length < 8) {
    errors.push({ field: password, message: 'Password must be at least 8 characters' });
  }

  if (errors.length > 0) {
    errors.forEach(e => {
      const errorEl = document.getElementById(e.field.id + '-error');
      e.field.setAttribute('aria-invalid', 'true');
      errorEl.textContent = e.message;
    });
    errors[0].field.focus();
    return false;
  }

  document.getElementById('form-status').textContent = 'Account created successfully';
  return true;
}
</script>

<div role="application" aria-label="Checkout wizard">
  <nav aria-label="Progress steps" role="tablist">
    <button role="tab" aria-selected="true" aria-controls="step1"
            id="tab-step1" tabindex="0">Shipping</button>
    <button role="tab" aria-selected="false" aria-controls="step2"
            id="tab-step2" tabindex="-1">Payment</button>
    <button role="tab" aria-selected="false" aria-controls="step3"
            id="tab-step3" tabindex="-1">Review</button>
  </nav>

  <div role="tabpanel" id="step1" aria-labelledby="tab-step1">
    <h2 tabindex="-1" id="step1-heading">Shipping address</h2>
    <!-- form fields for step 1 -->
    <button type="button" onclick="goToStep(2)">Continue to payment</button>
  </div>

  <div role="tabpanel" id="step2" aria-labelledby="tab-step2" hidden>
    <h2 tabindex="-1" id="step2-heading">Payment method</h2>
    <!-- form fields for step 2 -->
    <button type="button" onclick="goToStep(3)">Review order</button>
  </div>

  <div role="tabpanel" id="step3" aria-labelledby="tab-step3" hidden>
    <h2 tabindex="-1" id="step3-heading">Review your order</h2>
    <!-- review content -->
    <button type="submit">Place order</button>
  </div>
</div>

class AccessibleAutocomplete {
  constructor(input, options) {
    this.input = input;
    this.options = options;
    this.listbox = null;
    this.activeIndex = -1;
    this.input.setAttribute('role', 'combobox');
    this.input.setAttribute('aria-autocomplete', 'list');
    this.input.setAttribute('aria-expanded', 'false');
    this.input.addEventListener('input', () => this.onInput());
    this.input.addEventListener('keydown', (e) => this.onKeydown(e));
    this.input.addEventListener('blur', () => setTimeout(() => this.close(), 200));
  }

  onInput() {
    const value = this.input.value;
    if (value.length < 2) {
      this.close();
      return;
    }
    const filtered = this.options.filter(o => o.toLowerCase().includes(value.toLowerCase()));
    this.render(filtered);
  }

  render(items) {
    this.close();
    if (items.length === 0) return;
    this.listbox = document.createElement('ul');
    this.listbox.setAttribute('role', 'listbox');
    this.listbox.id = this.input.id + '-listbox';
    this.input.setAttribute('aria-controls', this.listbox.id);
    items.forEach((item, index) => {
      const option = document.createElement('li');
      option.setAttribute('role', 'option');
      option.id = `${this.input.id}-option-${index}`;
      option.textContent = item;
      option.addEventListener('click', () => this.select(index));
      option.addEventListener('mousedown', (e) => e.preventDefault());
      this.listbox.appendChild(option);
    });
    this.input.parentNode.appendChild(this.listbox);
    this.input.setAttribute('aria-expanded', 'true');
    this.activeIndex = -1;
  }

  onKeydown(e) {
    if (!this.listbox) return;
    const items = this.listbox.children;
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      this.activeIndex = Math.min(this.activeIndex + 1, items.length - 1);
      this.updateActive(items);
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      this.activeIndex = Math.max(this.activeIndex - 1, -1);
      this.updateActive(items);
    } else if (e.key === 'Enter') {
      e.preventDefault();
      if (this.activeIndex >= 0) this.select(this.activeIndex);
    } else if (e.key === 'Escape') {
      this.close();
    }
  }

  select(index) {
    const item = this.listbox.children[index];
    this.input.value = item.textContent;
    this.input.setAttribute('aria-activedescendant', item.id);
    this.close();
  }

  updateActive(items) {
    Array.from(items).forEach((item, i) => {
      item.setAttribute('aria-selected', i === this.activeIndex);
    });
    if (this.activeIndex >= 0) {
      this.input.setAttribute('aria-activedescendant', items[this.activeIndex].id);
    }
  }

  close() {
    if (this.listbox) {
      this.listbox.remove();
      this.listbox = null;
    }
    this.input.setAttribute('aria-expanded', 'false');
    this.input.removeAttribute('aria-activedescendant');
  }
}