accessibility

name	Accessibility
description	Designing and building products that can be used by people with diverse abilities, including those with visual, auditory, motor, and cognitive impairments
license	MIT
compatibility	universal
audience	developers, designers, content creators
category	interdisciplinary

Accessibility

What I Do

I ensure digital products are usable by people with diverse abilities through standards-compliant implementation. I help identify and remove barriers that prevent equal access to information and functionality.

When to Use Me

• Building new features or components
• Auditing existing applications for accessibility
• Creating accessible forms, navigation, and content
• Ensuring screen reader compatibility
• Meeting legal compliance requirements (ADA, WCAG, Section 508)
• Testing with assistive technologies

Core Concepts

1. WCAG Principles: Perceivable, Operable, Understandable, Robust (POUR)
2. Accessibility Tree: DOM representation for assistive technologies
3. ARIA Roles and Attributes: Accessible Rich Internet Applications semantics
4. Screen Reader Navigation: How blind users traverse content
5. Keyboard Accessibility: All functionality via keyboard alone
6. Color Contrast: Minimum ratios for readability (4.5:1 normal, 3:1 large)
7. Focus Management: Visible, logical, and ordered focus indicators
8. Reduced Motion: Respecting user motion preferences
9. Alternative Text: Text equivalents for non-text content
10. Captions and Transcripts: Audio and video accessibility

Code Examples

Accessible Form with Error Handling

import React, { useState } from 'react';

const AccessibleForm = () => {
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  
  const validate = (name, value) => {
    switch (name) {
      case 'email':
        return !value.includes('@') ? 'Please enter a valid email' : '';
      case 'password':
        return value.length < 8 ? 'Password must be at least 8 characters' : '';
      default:
        return '';
    }
  };
  
  const handleBlur = (e) => {
    const { name, value } = e.target;
    setTouched(prev => ({ ...prev, [name]: true }));
    const error = validate(name, value);
    setErrors(prev => ({ ...prev, [name]: error }));
  };
  
  return (
    <form aria-describedby=>
      
        All fields are required. We'll use your email to send confirmation.
      
      
      
        Email Address
        
        We'll never share your email
        {errors.email && (
          
            {errors.email}
          
        )}
      
      
      
        Submit
      
    
  );
};

Screen Reader Announcement Manager

class Announcer {
  constructor() {
    this.announcement = '';
    this.liveRegion = null;
    this.init();
  }
  
  init() {
    this.liveRegion = document.createElement('div');
    this.liveRegion.setAttribute('aria-live', 'polite');
    this.liveRegion.setAttribute('aria-atomic', 'true');
    this.liveRegion.className = 'sr-only';
    document.body.appendChild(this.liveRegion);
  }
  
  announce(message, priority = 'polite') {
    this.liveRegion.setAttribute('aria-live', priority);
    this.liveRegion.textContent = '';
    setTimeout(() => {
      .. = message;
    }, );
  }
  
  () {
    .(message, );
  }
}


 announcer =  ();

 () {
  announcer.(message);
}

 () {
  announcer.(error);
}

Keyboard Navigation Handler

class KeyboardNavigator {
  constructor(container) {
    this.container = container;
    this.items = [];
    this.currentIndex = 0;
  }
  
  setupGridNavigation(columns) {
    this.columns = columns;
    
    this.container.addEventListener('keydown', (e) => {
      switch (e.key) {
        case 'ArrowRight':
          this.moveFocus(1);
          break;
        case 'ArrowLeft':
          this.moveFocus(-1);
          break;
        case 'ArrowDown':
          this.moveFocus(this.columns);
          break;
        case 'ArrowUp':
          this.moveFocus(-this.columns);
          break;
        case :
          .();
          ;
         :
          .(.. - );
          ;
         :
         :
          .();
          e.();
          ;
        :
          ;
      }
      e.();
    });
  }
  
  () {
     newIndex = . + direction;
    newIndex = .(, .(newIndex, .. - ));
    .(newIndex);
  }
  
  () {
    . = index;
    .[index]?.();
  }
  
  () {
    .[.]?.();
  }
}

Best Practices

1. Test with real assistive technologies (NVDA, VoiceOver, switch controls)
2. Use semantic HTML elements whenever possible
3. Ensure all interactive elements are keyboard accessible
4. Provide text alternatives for all non-text content
5. Maintain sufficient color contrast ratios
6. Never rely on color alone to convey information
7. Design for focus visibility and logical tab order
8. Use ARIA only when necessary and correctly
9. Provide captions and transcripts for multimedia
10. Test with users who have disabilities throughout development