<div class="field-group">
  <label for="username">
    Username <span aria-hidden="true">*</span>
  </label>
  <input type="text" id="username"
         required
         aria-required="true"
         aria-describedby="username-error">
  <span id="username-error" class="field-error" role="alert"></span>
</div>

<script>
const field = document.getElementById('username');

field.addEventListener('blur', function() {
  const errorEl = document.getElementById('username-error');

  if (!this.value.trim()) {
    this.setAttribute('aria-invalid', 'true');
    errorEl.textContent = 'Username is required.';
    errorEl.style.display = 'block';
  } else {
    this.removeAttribute('aria-invalid');
    errorEl.textContent = '';
    errorEl.style.display = 'none';
  }
});
</script>

<div class="field-group">
  <label for="new-password">Password</label>
  <input type="password" id="new-password"
         aria-describedby="password-hint password-strength">
  <span id="password-hint" class="hint">
    Minimum 8 characters, at least one number.
  </span>
  <span id="password-strength"
        aria-live="polite"
        class="strength-indicator"></span>
</div>

<script>
document.getElementById('new-password')
  .addEventListener('input', function() {
    const strength = document.getElementById('password-strength');
    const val = this.value;

    if (val.length === 0) {
      strength.textContent = '';
    } else if (val.length < 8) {
      strength.textContent = 'Password strength: too short';
    } else if (!/\d/.test(val)) {
      strength.textContent = 'Password strength: needs a number';
    } else {
      strength.textContent = 'Password strength: strong';
    }
  });
</script>

<div id="error-summary" role="alert" tabindex="-1"
     class="error-summary" style="display:none;">
  <h3>There are 2 errors in this form</h3>
  <ul>
    <li><a href="#email">Email: enter a valid address</a></li>
    <li><a href="#password">Password: minimum 8 characters</a></li>
  </ul>
</div>

<script>
function showErrorSummary(errors) {
  const summary = document.getElementById('error-summary');
  const list = summary.querySelector('ul');
  const heading = summary.querySelector('h3');

  list.innerHTML = '';
  heading.textContent = 'There ' +
    (errors.length === 1 ? 'is 1 error' : 'are ' + errors.length + ' errors') +
    ' in this form';

  errors.forEach(function(err) {
    const li = document.createElement('li');
    const link = document.createElement('a');
    link.href = '#' + err.fieldId;
    link.textContent = err.label + ': ' + err.message;
    link.addEventListener('click', function(e) {
      e.preventDefault();
      document.getElementById(err.fieldId).focus();
    });
    li.appendChild(link);
    list.appendChild(li);
  });

  summary.style.display = 'block';
  summary.focus(); // Move focus to trigger announcement
}
</script>

function markFieldValid(inputId) {
  const input = document.getElementById(inputId);
  const errorEl = document.getElementById(inputId + '-error');
  const successEl = document.getElementById(inputId + '-success');

  // Clear error state
  input.removeAttribute('aria-invalid');
  input.classList.add('valid-field');
  errorEl.textContent = '';
  errorEl.style.display = 'none';

  // Show success (optional, for critical fields)
  if (successEl) {
    successEl.textContent = 'Looks good.';
    successEl.style.display = 'block';
    // Only update aria-describedby if the success element exists
    input.setAttribute('aria-describedby', inputId + '-success');
  }
}

<!-- Step indicator for screen readers -->
<div role="group" aria-label="Registration form, step 2 of 3">
  <h2>Step 2: Contact Information</h2>

  <!-- Error summary scoped to this step -->
  <div id="step2-errors" role="alert" tabindex="-1"></div>

  <!-- Fields for this step -->
  <div class="field-group">
    <label for="phone">Phone number</label>
    <input type="tel" id="phone"
           aria-describedby="phone-error">
    <span id="phone-error"></span>
  </div>

  <button type="button" onclick="validateStep(2)">
    Continue to step 3
  </button>
</div>

<script>
function validateStep(stepNumber) {
  const errors = [];
  // Validate only fields in the current step
  const step = document.querySelector('[aria-label*="step ' + stepNumber + '"]');
  const fields = step.querySelectorAll('input[required], input[aria-required]');

  fields.forEach(function(field) {
    if (!field.value.trim()) {
      errors.push({
        fieldId: field.id,
        label: field.labels[0].textContent,
        message: 'This field is required'
      });
    }
  });

  if (errors.length > 0) {
    showStepErrors(stepNumber, errors);
  } else {
    advanceToStep(stepNumber + 1);
  }
}
</script>