Keyboard Accessibility in Web Applications

Programmatic Focus Management

// Focus management utilities
class FocusManager {
  constructor() {
    this.focusableSelector = [
      'a[href]',
      'button:not([disabled])',
      'input:not([disabled])',
      'select:not([disabled])',
      'textarea:not([disabled])',
      '[tabindex]:not([tabindex="-1"])',
      '[contenteditable]'
    ].join(', ');
  }
  
  // Get all focusable elements within a container
  getFocusableElements(container = document) {
    return Array.from(container.querySelectorAll(this.focusableSelector))
      .filter(el => {
        // Check if element is visible
        return el.offsetParent !== null && 
               getComputedStyle(el).visibility !== 'hidden';
      });
  }
  
  // Move focus to first focusable element in container
  focusFirst(container) {
    const elements = this.getFocusableElements(container);
    if (elements.length > 0) {
      elements[0].focus();
    }
  }
  
  // Save and restore focus (useful for modals)
  saveFocus() {
    this.previouslyFocused = document.activeElement;
  }
  
  restoreFocus() {
    if (this.previouslyFocused && this.previouslyFocused.focus) {
      this.previouslyFocused.focus();
    }
  }
  
  // Skip to main content
  skipToMain() {
    const main = document.querySelector('main') || 
                 document.querySelector('[role="main"]');
    if (main) {
      main.setAttribute('tabindex', '-1');
      main.focus();
      main.addEventListener('blur', () => {
        main.removeAttribute('tabindex');
      }, { once: true });
    }
  }
}

// Example: Managing focus after dynamic content update
async function loadMoreContent() {
  const button = document.activeElement;
  const newContent = await fetchContent();
  
  // Insert new content
  contentContainer.insertAdjacentHTML('beforeend', newContent);
  
  // Announce to screen readers
  announceToScreenReader('New content loaded');
  
  // Move focus to first new item
  const firstNewItem = contentContainer.querySelector('.new-item');
  if (firstNewItem) {
    firstNewItem.focus();
  } else {
    // Fallback: restore focus to button
    button.focus();
  }
}

JavaScript Enhancement for Skip Links

// Enhance skip links with smooth scrolling and focus management
document.querySelectorAll('.skip-link').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    
    const targetId = link.getAttribute('href').substring(1);
    const target = document.getElementById(targetId);
    
    if (target) {
      // Make target focusable if it isn't already
      if (!target.hasAttribute('tabindex')) {
        target.setAttribute('tabindex', '-1');
      }
      
      // Smooth scroll to target
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      
      // Focus the target
      target.focus();
      
      // Remove tabindex after blur if we added it
      target.addEventListener('blur', () => {
        if (target.getAttribute('tabindex') === '-1') {
          target.removeAttribute('tabindex');
        }
      }, { once: true });
    }
  });
});

Accessible Modal Implementation

class AccessibleModal {
  constructor(modalElement) {
    this.modal = modalElement;
    this.focusableElements = null;
    this.firstFocusable = null;
    this.lastFocusable = null;
    this.previouslyFocused = null;
    
    this.init();
  }
  
  init() {
    // Set ARIA attributes
    this.modal.setAttribute('role', 'dialog');
    this.modal.setAttribute('aria-modal', 'true');
    
    // Get close button
    this.closeButton = this.modal.querySelector('.modal-close');
    
    // Event listeners
    this.modal.addEventListener('keydown', (e) => this.handleKeydown(e));
    this.closeButton?.addEventListener('click', () => this.close());
  }
  
  open() {
    // Save current focus
    this.previouslyFocused = document.activeElement;
    
    // Show modal
    this.modal.classList.add('is-open');
    this.modal.removeAttribute('hidden');
    
    // Get focusable elements
    this.updateFocusableElements();
    
    // Focus first focusable element or modal itself
    if (this.firstFocusable) {
      this.firstFocusable.focus();
    } else {
      this.modal.focus();
    }
    
    // Prevent body scroll
    document.body.style.overflow = 'hidden';
    
    // Add backdrop click handler
    this.backdrop = this.modal.querySelector('.modal-backdrop');
    if (this.backdrop) {
      this.backdrop.addEventListener('click', () => this.close());
    }
  }
  
  close() {
    // Hide modal
    this.modal.classList.remove('is-open');
    this.modal.setAttribute('hidden', '');
    
    // Restore body scroll
    document.body.style.overflow = '';
    
    // Restore focus
    if (this.previouslyFocused && this.previouslyFocused.focus) {
      this.previouslyFocused.focus();
    }
  }
  
  updateFocusableElements() {
    const focusableSelectors = [
      'a[href]',
      'button:not([disabled])',
      'input:not([disabled])',
      'select:not([disabled])',
      'textarea:not([disabled])',
      '[tabindex]:not([tabindex="-1"])'
    ];
    
    this.focusableElements = this.modal.querySelectorAll(
      focusableSelectors.join(', ')
    );
    
    this.firstFocusable = this.focusableElements[0];
    this.lastFocusable = this.focusableElements[this.focusableElements.length - 1];
  }
  
  handleKeydown(event) {
    // Handle Escape
    if (event.key === 'Escape') {
      event.preventDefault();
      this.close();
      return;
    }
    
    // Handle Tab - trap focus within modal
    if (event.key === 'Tab') {
      if (event.shiftKey) {
        // Shift + Tab
        if (document.activeElement === this.firstFocusable) {
          event.preventDefault();
          this.lastFocusable.focus();
        }
      } else {
        // Tab
        if (document.activeElement === this.lastFocusable) {
          event.preventDefault();
          this.firstFocusable.focus();
        }
      }
    }
  }
}

// Usage
const modal = new AccessibleModal(document.getElementById('my-modal'));

// Open modal
document.querySelector('.open-modal-btn').addEventListener('click', () => {
  modal.open();
});

// Announce modal state to screen readers
function announceModal(isOpen) {
  const announcement = document.createElement('div');
  announcement.setAttribute('role', 'status');
  announcement.setAttribute('aria-live', 'polite');
  announcement.className = 'sr-only';
  announcement.textContent = isOpen ? 'Dialog opened' : 'Dialog closed';
  
  document.body.appendChild(announcement);
  setTimeout(() => announcement.remove(), 1000);
}

Automated Testing Script

// Automated keyboard accessibility audit
class KeyboardAccessibilityAudit {
  constructor() {
    this.issues = [];
  }
  
  audit() {
    this.checkFocusableElements();
    this.checkTabIndex();
    this.checkAriaAttributes();
    this.checkKeyboardTraps();
    this.checkFocusIndicators();
    
    return this.generateReport();
  }
  
  checkFocusableElements() {
    // Find interactive elements without proper focus handling
    const interactiveElements = document.querySelectorAll(
      'a, button, input, select, textarea, [onclick], [role="button"]'
    );
    
    interactiveElements.forEach(element => {
      // Check if element is keyboard accessible
      const tabindex = element.getAttribute('tabindex');
      const isDisabled = element.hasAttribute('disabled');
      
      if (!isDisabled && tabindex === '-1') {
        this.issues.push({
          type: 'error',
          element: element,
          message: 'Interactive element is not keyboard accessible',
          suggestion: 'Remove tabindex="-1" or make element non-interactive'
        });
      }
      
      // Check for click handlers without keyboard support
      if (element.onclick && !element.matches('a, button')) {
        if (!element.onkeydown && !element.onkeyup && !element.onkeypress) {
          this.issues.push({
            type: 'warning',
            element: element,
            message: 'Click handler without keyboard support',
            suggestion: 'Add keyboard event handlers or use a button element'
          });
        }
      }
    });
  }
  
  checkTabIndex() {
    // Find elements with positive tabindex
    const positiveTabIndex = document.querySelectorAll('[tabindex]:not([tabindex="0"]):not([tabindex="-1"])');
    
    positiveTabIndex.forEach(element => {
      this.issues.push({
        type: 'warning',
        element: element,
        message: `Positive tabindex value: ${element.getAttribute('tabindex')}`,
        suggestion: 'Use tabindex="0" or rely on natural tab order'
      });
    });
  }
  
  checkAriaAttributes() {
    // Check for missing ARIA labels on interactive elements
    const needsLabel = document.querySelectorAll(
      'button:not([aria-label]):not([aria-labelledby]):empty, ' +
      'a:not([aria-label]):not([aria-labelledby]):empty, ' +
      '[role="button"]:not([aria-label]):not([aria-labelledby])'
    );
    
    needsLabel.forEach(element => {
      if (!element.textContent.trim()) {
        this.issues.push({
          type: 'error',
          element: element,
          message: 'Interactive element without accessible name',
          suggestion: 'Add aria-label, aria-labelledby, or text content'
        });
      }
    });
  }
  
  checkKeyboardTraps() {
    // Simple check for potential keyboard traps
    const modals = document.querySelectorAll('[role="dialog"], .modal');
    
    modals.forEach(modal => {
      if (!modal.querySelector('[aria-label*="close"], [aria-label*="Close"], .close, .modal-close')) {
        this.issues.push({
          type: 'warning',
          element: modal,
          message: 'Modal without obvious close button',
          suggestion: 'Ensure modal can be closed with Escape key'
        });
      }
    });
  }
  
  checkFocusIndicators() {
    // Check if focus styles are defined
    const styles = Array.from(document.styleSheets)
      .flatMap(sheet => {
        try {
          return Array.from(sheet.cssRules || []);
        } catch (e) {
          return [];
        }
      });
    
    const hasFocusStyles = styles.some(rule => 
      rule.selectorText && rule.selectorText.includes(':focus')
    );
    
    if (!hasFocusStyles) {
      this.issues.push({
        type: 'warning',
        element: document.body,
        message: 'No :focus styles found',
        suggestion: 'Add visible focus indicators for keyboard navigation'
      });
    }
  }
  
  generateReport() {
    console.group('Keyboard Accessibility Audit Results');
    console.log(`Found ${this.issues.length} issues`);
    
    this.issues.forEach((issue, index) => {
      console.group(`Issue #${index + 1}: ${issue.type.toUpperCase()}`);
      console.log('Message:', issue.message);
      console.log('Element:', issue.element);
      console.log('Suggestion:', issue.suggestion);
      console.groupEnd();
    });
    
    console.groupEnd();
    
    return this.issues;
  }
}

// Run audit
const audit = new KeyboardAccessibilityAudit();
audit.audit();

Key Takeaways

• • Test every feature with keyboard only
• • Provide visible focus indicators
• • Follow established keyboard patterns
• • Use semantic HTML whenever possible
• • Add ARIA attributes thoughtfully
• • Test with real assistive technologies