JavaScript accessibility isn’t just a technical requirement—it’s about creating web experiences that everyone can use, regardless of their abilities. As developers, we have the responsibility to ensure our applications are inclusive. In my years of building web applications, I’ve learned that accessibility benefits all users, not just those with disabilities.

Web accessibility begins with understanding that people interact with websites differently. Some use screen readers, others navigate solely with keyboards, and many rely on assistive technologies. JavaScript, when implemented thoughtfully, can enhance accessibility rather than hinder it.

The foundation of accessible JavaScript starts with proper HTML semantics. I always build with native HTML elements before adding JavaScript functionality. This approach provides a solid base that assistive technologies understand without additional work.

<!-- Poor practice -->
<div onclick="submitForm()">Submit</div>

<!-- Better practice -->
<button type="submit">Submit</button>

Keyboard navigation is essential for users who can’t operate a mouse. All interactive elements must be keyboard accessible. I ensure users can tab through interfaces logically and use Enter or Space to activate elements. This helps not only people with motor disabilities but also power users who prefer keyboard shortcuts.

document.addEventListener('DOMContentLoaded', () => {
  const menuButton = document.getElementById('menu-toggle');
  
  menuButton.addEventListener('click', toggleMenu);
  menuButton.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      toggleMenu();
    }
  });
});

function toggleMenu() {
  const menu = document.getElementById('menu');
  const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
  
  menuButton.setAttribute('aria-expanded', !isExpanded);
  menu.hidden = isExpanded;
}

Focus management is critical when developing dynamic interfaces. When opening modals, displaying notifications, or navigating between views, I carefully manage focus to maintain a logical tab order. This prevents keyboard users from becoming trapped or lost in the interface.

class Modal {
  constructor(modalId) {
    this.modal = document.getElementById(modalId);
    this.focusableElements = this.modal.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    this.firstElement = this.focusableElements[0];
    this.lastElement = this.focusableElements[this.focusableElements.length - 1];
    this.previousFocus = null;
  }
  
  open() {
    this.previousFocus = document.activeElement;
    this.modal.setAttribute('aria-hidden', 'false');
    this.modal.style.display = 'block';
    this.firstElement.focus();
    this.modal.addEventListener('keydown', this.handleTabKey.bind(this));
  }
  
  close() {
    this.modal.setAttribute('aria-hidden', 'true');
    this.modal.style.display = 'none';
    this.modal.removeEventListener('keydown', this.handleTabKey.bind(this));
    
    // Return focus to the element that had focus before the modal opened
    if (this.previousFocus) {
      this.previousFocus.focus();
    }
  }
  
  handleTabKey(event) {
    if (event.key !== 'Tab') return;
    
    if (event.shiftKey && document.activeElement === this.firstElement) {
      event.preventDefault();
      this.lastElement.focus();
    } else if (!event.shiftKey && document.activeElement === this.lastElement) {
      event.preventDefault();
      this.firstElement.focus();
    }
  }
}

// Usage
const modal = new Modal('my-modal');
document.getElementById('open-modal').addEventListener('click', () => modal.open());
document.getElementById('close-modal').addEventListener('click', () => modal.close());

ARIA (Accessible Rich Internet Applications) attributes are necessary when native HTML semantics aren’t sufficient. I apply ARIA roles, states, and properties judiciously to enhance the accessibility of complex components.

// Creating an accessible custom dropdown
function createAccessibleDropdown() {
  const dropdown = document.querySelector('.custom-dropdown');
  const button = dropdown.querySelector('button');
  const menu = dropdown.querySelector('ul');
  const options = menu.querySelectorAll('li');
  
  // Setup ARIA attributes
  button.setAttribute('aria-haspopup', 'listbox');
  button.setAttribute('aria-expanded', 'false');
  menu.setAttribute('role', 'listbox');
  menu.id = 'dropdown-items';
  button.setAttribute('aria-controls', menu.id);
  
  options.forEach((option, index) => {
    option.setAttribute('role', 'option');
    option.id = `option-${index}`;
    option.setAttribute('tabindex', '-1');
  });
  
  // Toggle dropdown
  button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !expanded);
    menu.hidden = expanded;
    
    if (!expanded) {
      options[0].focus();
    }
  });
  
  // Handle keyboard navigation
  menu.addEventListener('keydown', (event) => {
    const activeIndex = Array.from(options).findIndex(option => 
      document.activeElement === option
    );
    
    switch (event.key) {
      case 'ArrowDown':
        event.preventDefault();
        if (activeIndex < options.length - 1) {
          options[activeIndex + 1].focus();
        }
        break;
      case 'ArrowUp':
        event.preventDefault();
        if (activeIndex > 0) {
          options[activeIndex - 1].focus();
        }
        break;
      case 'Escape':
        button.focus();
        button.setAttribute('aria-expanded', 'false');
        menu.hidden = true;
        break;
      case 'Enter':
      case ' ':
        event.preventDefault();
        selectOption(options[activeIndex]);
        break;
    }
  });
  
  function selectOption(option) {
    options.forEach(opt => opt.setAttribute('aria-selected', 'false'));
    option.setAttribute('aria-selected', 'true');
    button.textContent = option.textContent;
    button.focus();
    button.setAttribute('aria-expanded', 'false');
    menu.hidden = true;
  }
}

When creating dynamic content that updates without a page refresh, I ensure screen reader users are aware of these changes. ARIA live regions announce dynamic content updates to users who cannot see the visual changes.

// Creating an accessible notification system
function createNotificationSystem() {
  // Create notification area if it doesn't exist
  let notificationArea = document.getElementById('notification-area');
  if (!notificationArea) {
    notificationArea = document.createElement('div');
    notificationArea.id = 'notification-area';
    notificationArea.setAttribute('aria-live', 'polite');
    notificationArea.setAttribute('aria-atomic', 'true');
    document.body.appendChild(notificationArea);
  }
  
  return {
    notify: function(message, type = 'info', duration = 5000) {
      const notification = document.createElement('div');
      notification.className = `notification notification-${type}`;
      notification.textContent = message;
      
      // Clear existing notifications
      notificationArea.innerHTML = '';
      
      // Add the new notification
      notificationArea.appendChild(notification);
      
      // Remove after duration
      setTimeout(() => {
        notification.classList.add('fade-out');
        notification.addEventListener('transitionend', () => {
          notification.remove();
        });
      }, duration);
    }
  };
}

// Usage
const notifications = createNotificationSystem();
document.getElementById('save-button').addEventListener('click', () => {
  // Save data first...
  notifications.notify('Your changes have been saved successfully.', 'success');
});

Form validation is where accessibility often falls short. When implementing client-side validation with JavaScript, I ensure error messages are programmatically associated with form fields and announced to screen reader users.

function setupAccessibleFormValidation() {
  const form = document.getElementById('registration-form');
  const errorSummary = document.getElementById('error-summary');
  
  form.addEventListener('submit', function(event) {
    // Clear previous errors
    errorSummary.innerHTML = '';
    errorSummary.hidden = true;
    
    const allInputs = form.querySelectorAll('input, select, textarea');
    let hasErrors = false;
    const errors = [];
    
    allInputs.forEach(input => {
      // Remove previous error states
      input.setAttribute('aria-invalid', 'false');
      const errorId = `${input.id}-error`;
      const existingError = document.getElementById(errorId);
      if (existingError) {
        existingError.remove();
      }
      
      // Check validation
      if (input.hasAttribute('required') && !input.value.trim()) {
        hasErrors = true;
        
        // Create error message
        const errorMessage = document.createElement('div');
        errorMessage.id = errorId;
        errorMessage.className = 'error-message';
        errorMessage.textContent = `${input.getAttribute('aria-label') || input.getAttribute('name')} is required.`;
        
        // Associate error with input
        input.setAttribute('aria-invalid', 'true');
        input.setAttribute('aria-errormessage', errorId);
        
        // Add error after input
        input.parentNode.insertBefore(errorMessage, input.nextSibling);
        
        // Add to error summary
        errors.push({
          field: input.getAttribute('aria-label') || input.getAttribute('name'),
          message: errorMessage.textContent,
          inputId: input.id
        });
      }
    });
    
    if (hasErrors) {
      event.preventDefault();
      
      // Build error summary
      const heading = document.createElement('h2');
      heading.textContent = 'Please fix the following errors:';
      errorSummary.appendChild(heading);
      
      const errorList = document.createElement('ul');
      errors.forEach(error => {
        const errorItem = document.createElement('li');
        const errorLink = document.createElement('a');
        errorLink.href = `#${error.inputId}`;
        errorLink.textContent = error.message;
        errorItem.appendChild(errorLink);
        errorList.appendChild(errorItem);
      });
      
      errorSummary.appendChild(errorList);
      errorSummary.hidden = false;
      errorSummary.focus();
    }
  });
}

Touch target sizing is often overlooked. I make interactive elements large enough for users with motor impairments, especially on touch devices. The recommended minimum touch target size is 44x44 pixels.

// Function to check and report on touch target sizes
function analyzeTouchTargets() {
  const interactiveElements = document.querySelectorAll('button, a, input, select, [role="button"]');
  const smallTargets = [];
  const MINIMUM_SIZE = 44; // in pixels
  
  interactiveElements.forEach(element => {
    const rect = element.getBoundingClientRect();
    if (rect.width < MINIMUM_SIZE || rect.height < MINIMUM_SIZE) {
      smallTargets.push({
        element: element,
        width: rect.width,
        height: rect.height
      });
    }
  });
  
  if (smallTargets.length > 0) {
    console.warn(`Found ${smallTargets.length} elements with insufficient touch target size:`);
    smallTargets.forEach(target => {
      console.warn(`${target.element.tagName} element is ${target.width.toFixed(1)}x${target.height.toFixed(1)}px, should be at least ${MINIMUM_SIZE}x${MINIMUM_SIZE}px`);
    });
  }
  
  return smallTargets;
}

// Auto-fix common touch target issues
function enhanceTouchTargets() {
  // Enhance small button elements
  document.querySelectorAll('button').forEach(button => {
    const computed = window.getComputedStyle(button);
    if (parseInt(computed.width) < 44 || parseInt(computed.height) < 44) {
      button.style.minWidth = '44px';
      button.style.minHeight = '44px';
    }
  });
  
  // Add padding to links that are too small
  document.querySelectorAll('a').forEach(link => {
    if (!link.childElementCount) { // Only target text links
      const computed = window.getComputedStyle(link);
      if (parseInt(computed.height) < 44) {
        link.style.paddingTop = '12px';
        link.style.paddingBottom = '12px';
      }
      if (parseInt(computed.width) < 44 && link.textContent.length < 3) {
        link.style.paddingLeft = '12px';
        link.style.paddingRight = '12px';
      }
    }
  });
}

Respecting user preferences is a fundamental aspect of accessibility. I check for reduced motion preferences to prevent triggering vestibular disorders and offer high contrast options for users with visual impairments.

// Detect user motion preferences
function setupMotionPreferences() {
  const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
  
  function updateMotionPreference(query) {
    if (query.matches) {
      // Apply reduced motion settings
      document.documentElement.classList.add('reduced-motion');
      
      // Replace animations with simpler transitions
      const animatedElements = document.querySelectorAll('.animated, .fade-in, .slide-in');
      animatedElements.forEach(element => {
        element.style.animation = 'none';
        element.style.transition = 'opacity 0.2s linear';
      });
      
      // Disable auto-playing carousels
      const carousels = document.querySelectorAll('.carousel, .slider');
      carousels.forEach(carousel => {
        // Find and stop any autoplay functionality
        if (carousel.hasAttribute('data-autoplay')) {
          carousel.setAttribute('data-autoplay', 'false');
          // Try to find and call any pause methods
          if (carousel.pause) carousel.pause();
        }
      });
    } else {
      document.documentElement.classList.remove('reduced-motion');
    }
  }
  
  // Set initial state
  updateMotionPreference(motionQuery);
  
  // Listen for changes
  motionQuery.addEventListener('change', updateMotionPreference);
}

// Handle contrast preferences
function setupContrastPreferences() {
  const highContrastQuery = window.matchMedia('(prefers-contrast: more)');
  
  function updateContrastPreference(query) {
    if (query.matches) {
      document.documentElement.classList.add('high-contrast');
    } else {
      document.documentElement.classList.remove('high-contrast');
    }
  }
  
  // Set initial state
  updateContrastPreference(highContrastQuery);
  
  // Listen for changes
  highContrastQuery.addEventListener('change', updateContrastPreference);
}

Custom controls require special attention. When creating custom UI components, I ensure they follow the same patterns as their native counterparts. This includes proper keyboard interactions, focus management, and ARIA roles.

// Creating an accessible custom slider
class AccessibleSlider {
  constructor(container) {
    this.container = container;
    this.slider = container.querySelector('.slider');
    this.thumb = container.querySelector('.slider-thumb');
    this.valueDisplay = container.querySelector('.slider-value');
    this.min = parseInt(this.slider.getAttribute('aria-valuemin') || 0);
    this.max = parseInt(this.slider.getAttribute('aria-valuemax') || 100);
    this.value = parseInt(this.slider.getAttribute('aria-valuenow') || this.min);
    this.step = parseInt(this.slider.getAttribute('data-step') || 1);
    
    this.initAttributes();
    this.setupEvents();
    this.updatePosition();
  }
  
  initAttributes() {
    this.slider.setAttribute('role', 'slider');
    this.slider.setAttribute('tabindex', '0');
    this.slider.setAttribute('aria-valuemin', this.min);
    this.slider.setAttribute('aria-valuemax', this.max);
    this.slider.setAttribute('aria-valuenow', this.value);
    this.slider.setAttribute('aria-orientation', 'horizontal');
    
    if (!this.slider.hasAttribute('aria-labelledby') && !this.slider.hasAttribute('aria-label')) {
      console.warn('Slider is missing an accessible label. Use aria-labelledby or aria-label.');
    }
  }
  
  setupEvents() {
    // Mouse events
    this.thumb.addEventListener('mousedown', this.onDragStart.bind(this));
    document.addEventListener('mousemove', this.onDrag.bind(this));
    document.addEventListener('mouseup', this.onDragEnd.bind(this));
    
    // Touch events
    this.thumb.addEventListener('touchstart', this.onDragStart.bind(this));
    document.addEventListener('touchmove', this.onDrag.bind(this));
    document.addEventListener('touchend', this.onDragEnd.bind(this));
    
    // Keyboard events
    this.slider.addEventListener('keydown', this.onKeyDown.bind(this));
    
    // Click on slider track
    this.slider.addEventListener('click', this.onClick.bind(this));
  }
  
  setValue(newValue) {
    // Constrain to min/max
    newValue = Math.max(this.min, Math.min(this.max, newValue));
    
    // Apply step if needed
    if (this.step > 1) {
      newValue = Math.round(newValue / this.step) * this.step;
    }
    
    this.value = newValue;
    this.slider.setAttribute('aria-valuenow', this.value);
    if (this.valueDisplay) {
      this.valueDisplay.textContent = this.value;
    }
    
    this.updatePosition();
    
    // Dispatch change event
    const event = new CustomEvent('slider:change', { 
      detail: { value: this.value } 
    });
    this.container.dispatchEvent(event);
  }
  
  updatePosition() {
    const percentage = ((this.value - this.min) / (this.max - this.min)) * 100;
    this.thumb.style.left = `${percentage}%`;
  }
  
  onKeyDown(event) {
    switch(event.key) {
      case 'ArrowLeft':
      case 'ArrowDown':
        event.preventDefault();
        this.setValue(this.value - this.step);
        break;
      case 'ArrowRight':
      case 'ArrowUp':
        event.preventDefault();
        this.setValue(this.value + this.step);
        break;
      case 'Home':
        event.preventDefault();
        this.setValue(this.min);
        break;
      case 'End':
        event.preventDefault();
        this.setValue(this.max);
        break;
      case 'PageDown':
        event.preventDefault();
        this.setValue(this.value - Math.max(this.step, (this.max - this.min) / 10));
        break;
      case 'PageUp':
        event.preventDefault();
        this.setValue(this.value + Math.max(this.step, (this.max - this.min) / 10));
        break;
    }
  }
  
  onClick(event) {
    // Ignore clicks on the thumb itself
    if (event.target === this.thumb) return;
    
    const sliderRect = this.slider.getBoundingClientRect();
    const clickPosition = event.clientX - sliderRect.left;
    const percentage = clickPosition / sliderRect.width;
    const newValue = this.min + percentage * (this.max - this.min);
    
    this.setValue(newValue);
  }
  
  onDragStart(event) {
    this.isDragging = true;
    this.slider.classList.add('dragging');
    
    // Prevent text selection during drag
    event.preventDefault();
  }
  
  onDrag(event) {
    if (!this.isDragging) return;
    
    let clientX;
    if (event.type === 'touchmove') {
      clientX = event.touches[0].clientX;
    } else {
      clientX = event.clientX;
    }
    
    const sliderRect = this.slider.getBoundingClientRect();
    let percentage = (clientX - sliderRect.left) / sliderRect.width;
    percentage = Math.max(0, Math.min(1, percentage));
    
    const newValue = this.min + percentage * (this.max - this.min);
    this.setValue(newValue);
  }
  
  onDragEnd() {
    this.isDragging = false;
    this.slider.classList.remove('dragging');
  }
}

// Usage
document.querySelectorAll('.custom-slider-container').forEach(container => {
  new AccessibleSlider(container);
});

Automated testing is an essential part of my development workflow. I integrate accessibility testing tools to catch issues early in the development process.

// Simple in-browser accessibility checker
function runAccessibilityChecks() {
  const issues = [];
  
  // Check for images without alt text
  const imagesWithoutAlt = document.querySelectorAll('img:not([alt])');
  imagesWithoutAlt.forEach(img => {
    issues.push({
      element: img,
      issue: 'Image is missing alt text',
      impact: 'critical',
      fix: 'Add descriptive alt text to image'
    });
  });
  
  // Check for insufficient color contrast in text elements
  function hasInsufficientContrast(element) {
    const backgroundColor = window.getComputedStyle(element).backgroundColor;
    const color = window.getComputedStyle(element).color;
    // This is a simplified check - a real implementation would calculate actual contrast ratio
    return (backgroundColor === 'rgba(0, 0, 0, 0)' && color === 'rgb(0, 0, 0)');
  }
  
  document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, a, button').forEach(element => {
    if (hasInsufficientContrast(element)) {
      issues.push({
        element: element,
        issue: 'Text may have insufficient color contrast',
        impact: 'moderate',
        fix: 'Ensure text has a contrast ratio of at least 4.5:1 (3:1 for large text)'
      });
    }
  });
  
  // Check for missing form labels
  document.querySelectorAll('input, select, textarea').forEach(input => {
    if (!input.hasAttribute('aria-label') && 
        !input.hasAttribute('aria-labelledby') && 
        !document.querySelector(`label[for="${input.id}"]`)) {
      issues.push({
        element: input,
        issue: 'Form control has no associated label',
        impact: 'critical',
        fix: 'Add label element with for attribute, or aria-label/aria-labelledby'
      });
    }
  });
  
  // Output results
  console.group('Accessibility Check Results');
  console.log(`Found ${issues.length} potential issues`);
  
  issues.forEach((issue, index) => {
    console.group(`Issue ${index + 1}: ${issue.issue} (${issue.impact})`);
    console.log('Element:', issue.element);
    console.log('Suggested fix:', issue.fix);
    console.groupEnd();
  });
  
  console.groupEnd();
  return issues;
}

Building accessible JavaScript applications is not a one-time task—it’s an ongoing commitment. I’ve seen firsthand how incorporating these practices from the beginning of a project leads to better experiences for all users. By focusing on semantic HTML, keyboard navigation, ARIA attributes, focus management, content updates, touch target sizing, motion preferences, and testing, we can create truly inclusive web experiences.

The web is for everyone, and as JavaScript developers, we have a responsibility to ensure our applications don’t exclude anyone. By making accessibility a core part of our development process, we create better products for all users.