# Accessibility Optimization

# 1. Semantic HTML

  

    
  
  
  

    
Page Title
    
Page content goes here.
  
  
  
  
  


# 2. ARIA Labels and Descriptions

  ×


  This will close the current dialog and return to the main content.



  Email Address
  
  
We'll never share your email with anyone else.
  
  
    Subscribe
  
  
Click to subscribe to our newsletter.


# 3. Focus Management
// Focus management for modals
class Modal {
  constructor(element) {
    this.element = element;
    this.previousFocus = null;
    this.focusableElements = this.element.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
  }
  
  open() {
    this.previousFocus = document.activeElement;
    this.element.style.display = 'block';
    this.element.setAttribute('aria-hidden', 'false');
    
    // Focus first focusable element
    this.focusableElements[0].focus();
    
    // Trap focus
    this.element.addEventListener('keydown', this.handleKeyDown.bind(this));
  }
  
  close() {
    this.element.style.display = 'none';
    this.element.setAttribute('aria-hidden', 'true');
    
    // Return focus to previous element
    if (this.previousFocus) {
      this.previousFocus.focus();
    }
    
    this.element.removeEventListener('keydown', this.handleKeyDown.bind(this));
  }
  
  handleKeyDown(event) {
    if (event.key === 'Escape') {
      this.close();
    } else if (event.key === 'Tab') {
      const firstElement = this.focusableElements[0];
      const lastElement = this.focusableElements[this.focusableElements.length - 1];
      
      if (event.shiftKey) {
        if (document.activeElement === firstElement) {
          event.preventDefault();
          lastElement.focus();
        }
      } else {
        if (document.activeElement === lastElement) {
          event.preventDefault();
          firstElement.focus();
        }
      }
    }
  }
}

# 4. Color Contrast
// CSS with proper contrast ratios
:root {
  --primary-color: #0066cc; /* 4.5:1 contrast ratio */
  --secondary-color: #333333; /* 4.5:1 contrast ratio */
  --background-color: #ffffff;
  --text-color: #000000; /* 21:1 contrast ratio */
  --error-color: #d32f2f; /* 4.5:1 contrast ratio */
}

.button {
  background-color: var(--primary-color);
  color: var(--background-color);
  border: 2px solid var(--primary-color);
}

.button:hover {
  background-color: var(--background-color);
  color: var(--primary-color);
}

.button:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

# 5. Screen Reader Support
// Screen reader only content
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

// Skip links
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-color);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

# 6. Form Accessibility

  

    
Contact Information
    
    

      Full Name *
      
      

    
    
    

      Phone Number
      
      
Include country code if outside US.
    
    
    

      

        
Preferred Contact Method
        
        Email
        
        
        Phone
      
    
    
    Submit
  


# 7. Image Accessibility
// Decorative images


// Informative images



  A bar chart showing quarterly sales data. Q1: $100k, Q2: $120k, Q3: $150k.
  The chart shows a steady increase in sales throughout the year.


// Complex images

  
  


# 8. Keyboard Navigation
// Custom keyboard navigation
class KeyboardNavigation {
  constructor(container) {
    this.container = container;
    this.focusableElements = container.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    this.currentIndex = 0;
  }
  
  init() {
    this.container.addEventListener('keydown', this.handleKeyDown.bind(this));
  }
  
  handleKeyDown(event) {
    switch (event.key) {
      case 'ArrowDown':
      case 'ArrowRight':
        event.preventDefault();
        this.focusNext();
        break;
      case 'ArrowUp':
      case 'ArrowLeft':
        event.preventDefault();
        this.focusPrevious();
        break;
      case 'Home':
        event.preventDefault();
        this.focusFirst();
        break;
      case 'End':
        event.preventDefault();
        this.focusLast();
        break;
    }
  }
  
  focusNext() {
    this.currentIndex = (this.currentIndex + 1) % this.focusableElements.length;
    this.focusableElements[this.currentIndex].focus();
  }
  
  focusPrevious() {
    this.currentIndex = this.currentIndex === 0 
      ? this.focusableElements.length - 1 
      : this.currentIndex - 1;
    this.focusableElements[this.currentIndex].focus();
  }
  
  focusFirst() {
    this.currentIndex = 0;
    this.focusableElements[0].focus();
  }
  
  focusLast() {
    this.currentIndex = this.focusableElements.length - 1;
    this.focusableElements[this.currentIndex].focus();
  }
}

# 9. Live Regions
// Announce dynamic content changes


function updateStatus(message) {
  const statusElement = document.getElementById('status');
  statusElement.textContent = message;
}

// Use assertive for urgent updates


function showAlert(message) {
  const alertElement = document.getElementById('alert');
  alertElement.textContent = message;
}

# 10. Accessibility Testing
// Automated accessibility testing
const axe = require('axe-core');

function runAccessibilityTests() {
  axe.run(document, (err, results) => {
    if (err) throw err;
    
    console.log('Accessibility violations:', results.violations);
    
    results.violations.forEach(violation => {
      console.log(`Rule: ${violation.id}`);
      console.log(`Description: ${violation.description}`);
      console.log(`Impact: ${violation.impact}`);
      console.log(`Nodes: ${violation.nodes.length}`);
    });
  });
}

// Manual testing checklist
const accessibilityChecklist = {
  keyboard: [
    'All interactive elements are keyboard accessible',
    'Tab order is logical and intuitive',
    'Focus indicators are visible',
    'No keyboard traps'
  ],
  screenReader: [
    'All content is accessible to screen readers',
    'Images have appropriate alt text',
    'Form labels are properly associated',
    'Headings are properly structured'
  ],
  visual: [
    'Color contrast meets WCAG standards',
    'Content is readable without color',
    'Text can be resized up to 200%',
    'No content flashes more than 3 times per second'
  ]
};