Generate Accessible Code and Audits

The Accessibility Design Checklist Expert is a skill specializing in accessibility design and standards compliance, with deep knowledge of WCAG 2.1 AA/AAA guidelines, Section 508 compliance, and inclusive design across web and mobile. It organizes around the POUR framework - Perceivable, Operable, Understandable, Robust - and critical success criteria like 4.5:1 contrast ratio for normal text (3:1 for large text), full keyboard navigation, screen reader compatibility with semantic markup, visible focus indicators, and alt text for meaningful images. It covers visual design (color/contrast rules that never rely on color alone, minimum 16px body text, 1.4-1.6 line height, 44x44px iOS / 48x48dp Android touch targets), semantic HTML and ARIA patterns (heading hierarchy, skip-navigation links, button/menu ARIA attributes, form labels with aria-describedby and aria-invalid), keyboard navigation with visible focus states and modal focus trapping, screen reader optimization via aria-live regions for status and loading announcements, and mobile-specific concerns (touch target sizing, prefers-reduced-motion, VoiceOver rotor navigation, TalkBack/Switch Access).

Use it when auditing or building a web or mobile interface against WCAG 2.1 AA/AAA and Section 508, or when you need concrete code patterns - not just principles - for accessible forms, modals, data tables, and dynamic content announcements. It names specific testing tools (axe-core, WAVE, Lighthouse, WebAIM, Stark color contrast analyzers) and a manual testing checklist (keyboard-only navigation, NVDA/JAWS/VoiceOver screen reader testing, 200% zoom, and testing with users with disabilities). It is not a substitute for that manual testing checklist - automated scanners like axe-core and Lighthouse catch a subset of issues, and the skill's own guidance treats manual and assistive-technology testing as a required final step, not optional.

// Focus trap implementation for modals
function trapFocus(element) {
  const focusableElements = element.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];
  
  element.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === firstElement) {
        e.preventDefault();
        lastElement.focus();
      } else if (!e.shiftKey && document.activeElement === lastElement) {
        e.preventDefault();
        firstElement.focus();
      }
    }
    
    if (e.key === 'Escape') {
      closeModal();
    }
  });
}

Given a UI to audit or build, it provides ready CSS, HTML, and JavaScript patterns: focus-visible outline styling, skip-link CSS, accessible heading hierarchy and skip-navigation markup, ARIA-complete button/dropdown-menu structures, labeled form fields with error announcements, accessible data table markup with scope attributes and captions, aria-live regions for polite and assertive announcements, a screen-reader announcement helper function, and accessible form validation that focuses the first error and announces the error count.

Frontend developers and designers who need concrete, testable accessibility patterns rather than abstract guidelines - each principle in this skill comes with a matching code snippet. It suits teams working toward WCAG 2.1 AA/AAA or Section 508 compliance who want both automated-tool guidance (axe-core, WAVE, Lighthouse) and a manual testing checklist covering keyboard-only navigation and real assistive-technology testing across iOS VoiceOver and Android TalkBack.