JavaScript Web Accessibility

// Set focus to a specific element
document.getElementById('my-element').focus();

// Trap focus within a modal dialog
function trapFocus(element) {
  const focusableElements = element.querySelectorAll(
    'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
  );
  
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];
  
  // Set initial focus
  firstElement.focus();
  
  element.addEventListener('keydown', function(e) {
    // Handle Tab key
    if (e.key === 'Tab') {
      // Shift + Tab
      if (e.shiftKey) {
        if (document.activeElement === firstElement) {
          lastElement.focus();
          e.preventDefault();
        }
      // Tab
      } else {
        if (document.activeElement === lastElement) {
          firstElement.focus();
          e.preventDefault();
        }
      }
    }
  });
}

// Add keyboard support to a custom button
const customButton = document.getElementById('custom-button');

// Make it focusable
customButton.setAttribute('tabindex', '0');

// Handle both click and keyboard events
customButton.addEventListener('click', performAction);
customButton.addEventListener('keydown', function(e) {
  // Activate on Enter or Space
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault(); // Prevent page scroll on Space
    performAction();
  }
});

function performAction() {
  console.log('Button activated!');
  // Action code here
}

// Adding ARIA attributes to elements

// Indicate the current state of a toggle button
const menuButton = document.getElementById('menu-button');
let expanded = false;

menuButton.setAttribute('aria-expanded', 'false');
menuButton.setAttribute('aria-controls', 'main-menu');

menuButton.addEventListener('click', function() {
  expanded = !expanded;
  this.setAttribute('aria-expanded', expanded.toString());
  
  const menu = document.getElementById('main-menu');
  if (expanded) {
    menu.style.display = 'block';
  } else {
    menu.style.display = 'none';
  }
});

// JavaScript for enhancing form accessibility

// Validate form fields and provide accessible error messages
function validateForm(form) {
  const fields = form.querySelectorAll('input, select, textarea');
  let isValid = true;
  
  // Clear previous error messages
  const errorMessages = form.querySelectorAll('.error-message');
  errorMessages.forEach(msg => msg.remove());
  
  // Check each field
  fields.forEach(field => {
    // Remove previous aria-invalid state
    field.removeAttribute('aria-invalid');
    field.removeAttribute('aria-describedby');
    
    if (field.hasAttribute('required') && !field.value.trim()) {
      isValid = false;
      
      // Create error message
      const errorId = `${field.id}-error`;
      const errorMessage = document.createElement('div');
      errorMessage.id = errorId;
      errorMessage.className = 'error-message';
      errorMessage.textContent = `${field.name || 'Field'} is required`;
      errorMessage.setAttribute('role', 'alert');
      
      // Insert error message after the field
      field.parentNode.insertBefore(errorMessage, field.nextSibling);
      
      // Connect field to error message with ARIA
      field.setAttribute('aria-invalid', 'true');
      field.setAttribute('aria-describedby', errorId);
    }
  });
  
  // If form is invalid, focus the first invalid field
  if (!isValid) {
    const firstInvalid = form.querySelector('[aria-invalid="true"]');
    firstInvalid.focus();
  }
  
  return isValid;
}

// Example usage
document.getElementById('my-form').addEventListener('submit', function(e) {
  if (!validateForm(this)) {
    e.preventDefault(); // Prevent form submission if invalid
  }
});

// Creating and updating live regions

// Polite announcement (won't interrupt the screen reader)
const statusRegion = document.getElementById('status-message');
statusRegion.setAttribute('aria-live', 'polite');
statusRegion.setAttribute('aria-atomic', 'true');

function updateStatus(message) {
  // Clear and then set the content to ensure announcement
  statusRegion.textContent = '';
  setTimeout(() => {
    statusRegion.textContent = message;
  }, 50);
}

// Assertive announcement (will interrupt the screen reader)
const alertRegion = document.getElementById('alert-message');
alertRegion.setAttribute('aria-live', 'assertive');
alertRegion.setAttribute('aria-atomic', 'true');

function showAlert(message) {
  alertRegion.textContent = '';
  setTimeout(() => {
    alertRegion.textContent = message;
  }, 50);
}