AI-Powered Accessibility Auditing and Automated Remediation

Real-World Problem Context

A frontend team ships a new feature with 15 components. Two weeks later, a user with a screen reader reports that the dropdown menu is completely inaccessible — no ARIA attributes, no keyboard navigation, no focus management. Manual accessibility auditing is slow (testing every component with NVDA/VoiceOver, checking WCAG 2.1 compliance across hundreds of pages) and expensive. AI-powered accessibility tools (axe-core with AI, AccessiBe, AudioEye, GitHub Copilot a11y suggestions, Deque's axe DevTools) go beyond rule-based checkers: they understand the visual UI, detect contextual accessibility issues that static rules miss (e.g., a carousel without keyboard controls, a modal without focus trap, a data table without proper headers), and generate remediation code. This post covers: how AI extends traditional a11y auditing, how it detects issues that rule-based tools miss, how it generates fix code, and how to build an automated a11y pipeline into CI/CD.

---

Problem Statements

1. Beyond Rule-Based Detection: Traditional tools (axe-core, Lighthouse) check ~100 static rules; how does AI detect contextual issues — like a custom dropdown that's missing keyboard navigation, a color contrast issue in a specific state, or a form with confusing tab order?

2. Automated Remediation: Detecting issues is half the battle — how does AI generate correct fix code (adding ARIA attributes, keyboard handlers, focus management) that integrates with the existing component without breaking anything?

3. Continuous Compliance: How do you prevent accessibility regressions — building a11y checks into CI, testing with real assistive technology simulation, and maintaining WCAG compliance as the codebase evolves?

---

Deep Dive: Internal Mechanisms

1. Accessibility Auditing Architecture

/*
 * Multi-layer accessibility auditing:
 *
 *   Layer 1: Static Analysis (AST)
 *   ┌─────────────────────────────────────────┐
 *   │ JSX/HTML parsing                         │
 *   │ - Missing alt on <img>                   │
 *   │ - Missing labels on <input>              │
 *   │ - Invalid ARIA attributes                │
 *   │ - Role misuse                            │
 *   │ Tools: eslint-plugin-jsx-a11y, axe-linter│
 *   └─────────────────────────────────────────┘
 *       │
 *       ▼
 *   Layer 2: Runtime DOM Analysis
 *   ┌─────────────────────────────────────────┐
 *   │ Rendered DOM inspection                  │
 *   │ - Color contrast (computed styles)       │
 *   │ - Focus order (actual tab sequence)      │
 *   │ - ARIA tree validity                     │
 *   │ - Dynamic content accessibility          │
 *   │ Tools: axe-core, Lighthouse, Pa11y       │
 *   └─────────────────────────────────────────┘
 *       │
 *       ▼
 *   Layer 3: AI-Powered Contextual Analysis
 *   ┌─────────────────────────────────────────┐
 *   │ Understanding component behavior          │
 *   │ - Custom widget keyboard interaction     │
 *   │ - Modal focus trap completeness          │
 *   │ - Live region update patterns            │
 *   │ - Screen reader announcement correctness │
 *   │ - Visual-only information                │
 *   │ Tools: LLM analysis of component source  │
 *   └─────────────────────────────────────────┘
 *       │
 *       ▼
 *   Layer 4: AI Visual Analysis
 *   ┌─────────────────────────────────────────┐
 *   │ Screenshot analysis via vision models     │
 *   │ - Text on busy backgrounds              │
 *   │ - Small touch targets                    │
 *   │ - Information conveyed only by color     │
 *   │ - Crowded interactive elements           │
 *   │ Tools: GPT-4V / Claude Vision            │
 *   └─────────────────────────────────────────┘
 */

2. Beyond axe-core: AI Contextual Understanding

/*
 * axe-core checks ~100 rules against the DOM.
 * But it misses contextual issues like:
 *
 * 1. Custom dropdown: has role="listbox" but no keyboard nav
 *    axe sees: valid ARIA ✓
 *    AI sees: missing onKeyDown handler for arrow keys ✗
 *
 * 2. Modal: has role="dialog" and aria-modal="true"
 *    axe sees: valid ARIA ✓
 *    AI sees: no focus trap, Tab goes behind the modal ✗
 *
 * 3. Carousel: has navigation buttons
 *    axe sees: buttons have accessible names ✓
 *    AI sees: no keyboard way to navigate slides,
 *             no live region announcing current slide ✗
 *
 * 4. Toast notification: appears and disappears
 *    axe sees: (nothing, Toast isn't in DOM when checked)
 *    AI sees: no aria-live region, screen reader misses it ✗
 */

async function aiAccessibilityAudit(componentSource, renderedHTML) {
    const prompt = `You are an expert web accessibility auditor (WCAG 2.1 AA).
Analyze this React component for accessibility issues.

## Component Source Code:
\`\`\`tsx
${componentSource}
\`\`\`

## Rendered HTML:
\`\`\`html
${renderedHTML}
\`\`\`

## Check for these contextual issues:

1. **Keyboard Navigation**: Can all interactive elements be reached and operated via keyboard?
   - Custom widgets: Does it handle ArrowUp/Down, Enter, Escape, Home, End?
   - Focus management: Does opening a dialog/dropdown move focus correctly?
   - Focus trap: Does modal/dialog prevent Tab from leaving?

2. **Screen Reader Experience**:
   - Are dynamic updates announced? (aria-live, role="status")
   - Do custom widgets have appropriate ARIA patterns? (combobox, dialog, tabpanel)
   - Is decorative content hidden? (aria-hidden, role="presentation")
   - Are error messages programmatically associated with inputs?

3. **Visual Accessibility**:
   - Is information conveyed only by color? (e.g., red/green status)
   - Are interactive elements visually distinguishable?
   - Are focus indicators visible?

4. **Interaction Patterns**:
   - Touch targets ≥ 44x44px?
   - Timeout warnings for timed content?
   - Can animations be paused?

## Output Format:
[
  {
    "wcag": "2.1.1",
    "criterion": "Keyboard",
    "severity": "critical",
    "issue": "Description of the issue",
    "element": "CSS selector or component name",
    "fix": "Specific fix description",
    "code": "// code to add or change"
  }
]`;

    return await callLLM(prompt);
}

3. Component Pattern Detection for ARIA

/*
 * AI identifies which ARIA pattern a component should follow:
 *
 * ┌───────────────────┬──────────────────────────────────────┐
 * │ Detected Pattern   │ Required ARIA Pattern                │
 * ├───────────────────┼──────────────────────────────────────┤
 * │ Dropdown/Select    │ role="combobox" + role="listbox"    │
 * │                    │ + aria-expanded, aria-activedescendant│
 * │                    │ + Arrow key navigation               │
 * │                    │                                      │
 * │ Modal/Dialog       │ role="dialog" + aria-modal="true"   │
 * │                    │ + focus trap + Escape to close       │
 * │                    │ + return focus on close              │
 * │                    │                                      │
 * │ Tabs              │ role="tablist" + role="tab"          │
 * │                    │ + role="tabpanel"                    │
 * │                    │ + Arrow key between tabs             │
 * │                    │                                      │
 * │ Accordion          │ Button headers + expandable panels  │
 * │                    │ + aria-expanded + aria-controls      │
 * │                    │                                      │
 * │ Toast/Alert        │ role="alert" or aria-live="polite"  │
 * │                    │ + auto-dismiss with sufficient time  │
 * │                    │                                      │
 * │ Data Table         │ role="grid" or <table> with         │
 * │                    │ <th scope> + <caption>               │
 * │                    │ + sortable column announcements      │
 * │                    │                                      │
 * │ Autocomplete       │ role="combobox" + role="listbox"    │
 * │                    │ + aria-autocomplete                  │
 * │                    │ + result count announcement          │
 * └───────────────────┴──────────────────────────────────────┘
 */

function detectComponentPattern(analysis) {
    const patterns = [];
    
    // Dropdown detection:
    if (analysis.hasPopover && analysis.hasListItems &&
        analysis.hasSelectionState) {
        patterns.push({
            pattern: 'combobox',
            confidence: 0.9,
            missingARIA: checkComboboxARIA(analysis),
            missingKeyboard: checkComboboxKeyboard(analysis),
        });
    }
    
    // Modal detection:
    if (analysis.hasOverlay && analysis.hasCloseButton &&
        analysis.rendersPortal) {
        patterns.push({
            pattern: 'dialog',
            confidence: 0.95,
            missingARIA: checkDialogARIA(analysis),
            missingKeyboard: checkDialogKeyboard(analysis),
        });
    }
    
    // Tab detection:
    if (analysis.hasTabLikeButtons && analysis.hasPanels &&
        analysis.activeStateToggle) {
        patterns.push({
            pattern: 'tablist',
            confidence: 0.85,
            missingARIA: checkTabARIA(analysis),
            missingKeyboard: checkTabKeyboard(analysis),
        });
    }
    
    return patterns;
}

function checkDialogARIA(analysis) {
    const missing = [];
    
    if (!analysis.hasRole('dialog')) {
        missing.push({ attr: 'role="dialog"', element: 'dialog container' });
    }
    if (!analysis.hasAttribute('aria-modal')) {
        missing.push({ attr: 'aria-modal="true"', element: 'dialog container' });
    }
    if (!analysis.hasAttribute('aria-labelledby') && !analysis.hasAttribute('aria-label')) {
        missing.push({ attr: 'aria-labelledby="dialog-title"', element: 'dialog container' });
    }
    if (!analysis.hasFocusTrap) {
        missing.push({ type: 'behavior', desc: 'Focus trap needed — Tab should cycle within dialog' });
    }
    if (!analysis.hasEscapeHandler) {
        missing.push({ type: 'behavior', desc: 'Escape key should close dialog' });
    }
    if (!analysis.returnsFocusOnClose) {
        missing.push({ type: 'behavior', desc: 'Focus should return to trigger element on close' });
    }
    
    return missing;
}

4. Automated Fix Generation

/*
 * AI generates fix code for each detected issue.
 * The fix must:
 * 1. Integrate with existing component code (not rewrite it)
 * 2. Follow the component's patterns (hooks, event handlers)
 * 3. Be minimal (add what's needed, don't refactor)
 */

async function generateA11yFix(issue, componentSource) {
    const prompt = `Fix this accessibility issue in the React component.

## Issue
WCAG ${issue.wcag}: ${issue.criterion}
Problem: ${issue.issue}
Element: ${issue.element}

## Current Component:
\`\`\`tsx
${componentSource}
\`\`\`

## Requirements:
1. Add the MINIMUM code needed to fix the issue.
2. Don't refactor or restructure the component.
3. Follow existing patterns (hooks, styling approach).
4. Include both the ARIA attributes AND keyboard behavior.

## Output:
Show the exact code changes as a diff.`;

    return await callLLM(prompt);
}

/*
 * Example fix for a custom dropdown missing keyboard navigation:
 *
 * BEFORE:
 * const Dropdown = ({ options, value, onChange }) => {
 *   const [isOpen, setIsOpen] = useState(false);
 *   return (
 *     <div className="dropdown">
 *       <button onClick={() => setIsOpen(!isOpen)}>
 *         {value || 'Select...'}
 *       </button>
 *       {isOpen && (
 *         <ul>
 *           {options.map(opt => (
 *             <li key={opt.value} onClick={() => {
 *               onChange(opt.value);
 *               setIsOpen(false);
 *             }}>
 *               {opt.label}
 *             </li>
 *           ))}
 *         </ul>
 *       )}
 *     </div>
 *   );
 * };
 *
 * AFTER (AI-generated fix):
 */

const DropdownFixed = ({ options, value, onChange, label }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [activeIndex, setActiveIndex] = useState(-1);
    const listRef = useRef(null);
    const buttonRef = useRef(null);
    
    const handleKeyDown = (e) => {
        switch (e.key) {
            case 'ArrowDown':
                e.preventDefault();
                if (!isOpen) {
                    setIsOpen(true);
                    setActiveIndex(0);
                } else {
                    setActiveIndex(prev =>
                        Math.min(prev + 1, options.length - 1)
                    );
                }
                break;
            case 'ArrowUp':
                e.preventDefault();
                setActiveIndex(prev => Math.max(prev - 1, 0));
                break;
            case 'Enter':
            case ' ':
                e.preventDefault();
                if (isOpen && activeIndex >= 0) {
                    onChange(options[activeIndex].value);
                    setIsOpen(false);
                    buttonRef.current?.focus();
                } else {
                    setIsOpen(true);
                    setActiveIndex(0);
                }
                break;
            case 'Escape':
                setIsOpen(false);
                buttonRef.current?.focus();
                break;
            case 'Home':
                e.preventDefault();
                setActiveIndex(0);
                break;
            case 'End':
                e.preventDefault();
                setActiveIndex(options.length - 1);
                break;
        }
    };
    
    const activeDescendantId = activeIndex >= 0
        ? `option-${options[activeIndex].value}`
        : undefined;
    
    return (
        <div className="dropdown" onKeyDown={handleKeyDown}>
            <button
                ref={buttonRef}
                role="combobox"
                aria-expanded={isOpen}
                aria-haspopup="listbox"
                aria-activedescendant={activeDescendantId}
                aria-label={label}
                onClick={() => setIsOpen(!isOpen)}
            >
                {value
                    ? options.find(o => o.value === value)?.label
                    : 'Select...'}
            </button>
            {isOpen && (
                <ul
                    ref={listRef}
                    role="listbox"
                    aria-label={label}
                >
                    {options.map((opt, i) => (
                        <li
                            key={opt.value}
                            id={`option-${opt.value}`}
                            role="option"
                            aria-selected={opt.value === value}
                            className={i === activeIndex ? 'active' : ''}
                            onClick={() => {
                                onChange(opt.value);
                                setIsOpen(false);
                                buttonRef.current?.focus();
                            }}
                        >
                            {opt.label}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
};

5. Visual Analysis with Vision Models

/*
 * Vision model analysis catches issues invisible to DOM inspection:
 *
 * 1. Text on busy background → poor contrast in practice
 * 2. Small touch targets that look fine on desktop
 * 3. Color-only information (red/green status, no icon/text)
 * 4. Crowded interactive elements (touch overlap)
 * 5. Missing visible focus indicators
 * 6. Content that looks like a link but isn't clickable
 */

async function visualAccessibilityAudit(screenshotBase64) {
    const response = await callVisionModel({
        messages: [{
            role: 'user',
            content: [
                {
                    type: 'image_url',
                    image_url: {
                        url: `data:image/png;base64,${screenshotBase64}`,
                        detail: 'high',
                    },
                },
                {
                    type: 'text',
                    text: `Analyze this UI screenshot for visual accessibility issues.

Check for:
1. Text that may be hard to read (low contrast, busy background, small size)
2. Interactive elements that are too small for touch (< 44x44px)
3. Information conveyed only by color (e.g., red/green status without icons)
4. Interactive elements too close together (risk of accidental taps)
5. Missing visible focus indicators on interactive elements
6. Text that doesn't look like it would scale well (fixed sizes)
7. Content or controls that might be obscured or overlapping

For each issue found:
- Describe what you see
- Explain why it's an accessibility problem
- Reference the relevant WCAG criterion
- Suggest a specific visual fix`,
                },
            ],
        }],
    });
    
    return response;
}

6. Focus Management Auditing

/*
 * Focus management is one of the most common a11y failures
 * and the hardest to detect automatically.
 *
 * AI analyzes component lifecycle to check:
 * - Does opening a modal move focus into the modal?
 * - Does closing a modal return focus to the trigger?
 * - Does Tab cycle through the modal (focus trap)?
 * - Does a route change announce the new page?
 * - Does deleting a list item move focus to the next item?
 */

async function auditFocusManagement(componentSource) {
    const analysis = {
        focusTriggers: [],     // Events that should move focus
        focusTargets: [],      // Elements that should receive focus
        focusTraps: [],        // Containers that should trap focus
        focusReturns: [],      // Cases where focus should return
    };
    
    const ast = parseAST(componentSource);
    
    // Find modal/dialog patterns:
    const modalOpenHandlers = findStateChanges(ast, /isOpen|isVisible|showModal/);
    for (const handler of modalOpenHandlers) {
        if (handler.newValue === true) {
            analysis.focusTriggers.push({
                event: handler.trigger,
                expectedAction: 'move focus to modal/first focusable element',
                hasFocusCall: containsFocusCall(handler.body),
            });
        }
        if (handler.newValue === false) {
            analysis.focusReturns.push({
                event: handler.trigger,
                expectedAction: 'return focus to previous element',
                hasFocusReturn: containsFocusReturn(handler.body),
            });
        }
    }
    
    // Check for focus trap in modals:
    const dialogElements = findElementsWithRole(ast, 'dialog');
    for (const dialog of dialogElements) {
        const hasFocusTrap = containsFocusTrapLogic(dialog);
        analysis.focusTraps.push({
            element: dialog,
            hasFocusTrap,
            issue: hasFocusTrap
                ? null
                : 'Modal missing focus trap — Tab key goes behind the dialog',
        });
    }
    
    return analysis;
}

/*
 * Focus trap implementation that AI would generate:
 */
function useFocusTrap(containerRef, isActive) {
    useEffect(() => {
        if (!isActive || !containerRef.current) return;
        
        const container = containerRef.current;
        const focusableSelector = [
            'a[href]', 'button:not([disabled])', 'input:not([disabled])',
            'select:not([disabled])', 'textarea:not([disabled])',
            '[tabindex]:not([tabindex="-1"])',
        ].join(', ');
        
        const focusableElements = container.querySelectorAll(focusableSelector);
        const firstFocusable = focusableElements[0];
        const lastFocusable = focusableElements[focusableElements.length - 1];
        
        // Move focus into container:
        firstFocusable?.focus();
        
        const handleKeyDown = (e) => {
            if (e.key !== 'Tab') return;
            
            if (e.shiftKey) {
                // Shift+Tab: if on first element, wrap to last
                if (document.activeElement === firstFocusable) {
                    e.preventDefault();
                    lastFocusable?.focus();
                }
            } else {
                // Tab: if on last element, wrap to first
                if (document.activeElement === lastFocusable) {
                    e.preventDefault();
                    firstFocusable?.focus();
                }
            }
        };
        
        container.addEventListener('keydown', handleKeyDown);
        return () => container.removeEventListener('keydown', handleKeyDown);
    }, [isActive, containerRef]);
}

7. CI/CD Integration: Automated A11y Pipeline

/*
 * Automated accessibility in CI:
 *
 *   PR opened
 *       │
 *       ▼
 *   1. Build Storybook / render pages
 *       │
 *       ▼
 *   2. Run axe-core on each page/story
 *       │
 *       ▼
 *   3. AI review on new/changed components
 *       │
 *       ▼
 *   4. Visual a11y check on screenshots
 *       │
 *       ▼
 *   5. Report results
 *      - Block PR if critical issues
 *      - Annotate with comments
 *      - Track a11y score over time
 */

// Playwright + axe-core integration:
async function runA11yTests(pages) {
    const results = [];
    
    for (const page of pages) {
        await playwright.goto(page.url);
        
        // Wait for page to be interactive:
        await playwright.waitForLoadState('networkidle');
        
        // Inject and run axe-core:
        const violations = await new AxeBuilder(playwright)
            .withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
            .exclude('.third-party-widget') // Skip third-party
            .analyze();
        
        results.push({
            url: page.url,
            violations: violations.violations,
            passes: violations.passes.length,
            incomplete: violations.incomplete,
        });
    }
    
    return results;
}

// Storybook component-level testing:
async function runStorybookA11y(storybookUrl) {
    // Get all stories:
    const stories = await fetch(`${storybookUrl}/stories.json`).then(r => r.json());
    
    const results = [];
    
    for (const story of Object.values(stories.stories)) {
        const storyUrl = `${storybookUrl}/iframe.html?id=${story.id}`;
        await playwright.goto(storyUrl);
        
        const violations = await new AxeBuilder(playwright)
            .analyze();
        
        if (violations.violations.length > 0) {
            results.push({
                storyId: story.id,
                component: story.title,
                violations: violations.violations,
            });
        }
    }
    
    return results;
}

// GitHub PR annotation:
async function annotateGitHubPR(prNumber, a11yResults) {
    const criticalIssues = a11yResults
        .flatMap(r => r.violations)
        .filter(v => v.impact === 'critical' || v.impact === 'serious');
    
    if (criticalIssues.length > 0) {
        // Block PR:
        await github.checks.create({
            name: 'Accessibility',
            status: 'completed',
            conclusion: 'failure',
            output: {
                title: `${criticalIssues.length} accessibility violations found`,
                summary: formatA11ySummary(criticalIssues),
                annotations: criticalIssues.map(issue => ({
                    path: mapViolationToFile(issue),
                    start_line: mapViolationToLine(issue),
                    annotation_level: 'failure',
                    message: `[${issue.id}] ${issue.description}\nHelp: ${issue.helpUrl}`,
                })),
            },
        });
    }
}

8. Screen Reader Simulation Testing

/*
 * AI can simulate what a screen reader would announce:
 *
 *   Visual UI:                Screen Reader Output:
 *   ┌──────────────┐         "Navigation landmark
 *   │ 🏠 Home      │          Link: Home
 *   │ 📧 Messages  │          Link: Messages (3 new)
 *   │ ⚙️ Settings   │          Link: Settings"
 *   └──────────────┘
 *
 * The AI computes the accessibility tree and simulates VoiceOver/NVDA.
 */

async function simulateScreenReader(renderedHTML) {
    // Build the accessibility tree:
    const a11yTree = buildAccessibilityTree(renderedHTML);
    
    // Simulate screen reader navigation:
    const announcements = [];
    
    function traverseA11yTree(node, depth = 0) {
        // Announce role + name:
        if (node.role !== 'generic' && node.role !== 'none') {
            let announcement = '';
            
            switch (node.role) {
                case 'heading':
                    announcement = `Heading level ${node.level}: ${node.name}`;
                    break;
                case 'link':
                    announcement = `Link: ${node.name}`;
                    break;
                case 'button':
                    announcement = `Button: ${node.name}`;
                    if (node.pressed !== undefined) {
                        announcement += node.pressed ? ' (pressed)' : ' (not pressed)';
                    }
                    break;
                case 'textbox':
                    announcement = `Edit text: ${node.label || 'unlabeled'}`;
                    if (node.value) announcement += `, value: ${node.value}`;
                    if (node.required) announcement += ', required';
                    break;
                case 'img':
                    announcement = node.name
                        ? `Image: ${node.name}`
                        : 'Image (no description)'; // A11Y ISSUE
                    break;
                case 'navigation':
                    announcement = `Navigation: ${node.name || 'unnamed'}`;
                    break;
                case 'region':
                    announcement = `Region: ${node.name || 'unnamed'}`;
                    break;
                default:
                    if (node.name) {
                        announcement = `${node.role}: ${node.name}`;
                    }
            }
            
            if (announcement) {
                announcements.push({
                    text: announcement,
                    element: node.selector,
                    issues: identifyAnnouncementIssues(node, announcement),
                });
            }
        }
        
        // Recurse into children:
        for (const child of node.children || []) {
            traverseA11yTree(child, depth + 1);
        }
    }
    
    traverseA11yTree(a11yTree);
    
    return announcements;
}

function identifyAnnouncementIssues(node, announcement) {
    const issues = [];
    
    if (node.role === 'img' && !node.name) {
        issues.push('Image has no alt text — screen reader says "image" with no description');
    }
    if (node.role === 'button' && !node.name) {
        issues.push('Button has no accessible name — screen reader says "button" with no label');
    }
    if (node.role === 'textbox' && !node.label) {
        issues.push('Input has no label — screen reader cannot describe what to enter');
    }
    if (node.role === 'link' && node.name === node.href) {
        issues.push('Link text is a raw URL — use descriptive text instead');
    }
    
    return issues;
}

9. WCAG Compliance Scoring and Tracking

/*
 * Track a11y compliance over time:
 *
 *   A11y Score Dashboard
 *   ┌────────────────────────────────────────┐
 *   │ Overall Score: 87/100     ▲ +3 from    │
 *   │                           last week     │
 *   ├────────────────────────────────────────┤
 *   │ Perceivable:  92%  ████████▉░         │
 *   │ Operable:     78%  ███████▊░░         │
 *   │ Understandable: 91%  █████████░░       │
 *   │ Robust:       88%  ████████▉░         │
 *   ├────────────────────────────────────────┤
 *   │ Critical Issues: 3 (from 8 last week) │
 *   │ Warnings: 12 (from 15 last week)      │
 *   │ Pages scanned: 47/52                  │
 *   └────────────────────────────────────────┘
 */

function calculateA11yScore(violations) {
    const weights = {
        critical: 10,
        serious: 5,
        moderate: 2,
        minor: 1,
    };
    
    let totalDeductions = 0;
    
    for (const violation of violations) {
        const weight = weights[violation.impact] || 1;
        const instanceCount = violation.nodes.length;
        totalDeductions += weight * Math.min(instanceCount, 5);
        // Cap per-rule deduction to avoid one rule tanking the score
    }
    
    // Score out of 100:
    return Math.max(0, 100 - totalDeductions);
}

// WCAG principle-level scoring:
function scoreByPrinciple(violations) {
    const principles = {
        perceivable: ['color-contrast', 'image-alt', 'label', 'video-caption'],
        operable: ['keyboard', 'focus-*', 'timing-*', 'seizures'],
        understandable: ['language-*', 'predictable-*', 'input-assistance-*'],
        robust: ['parsing', 'name-role-value', 'status-messages'],
    };
    
    const scores = {};
    
    for (const [principle, rulePatterns] of Object.entries(principles)) {
        const ruleViolations = violations.filter(v =>
            rulePatterns.some(p =>
                p.endsWith('*')
                    ? v.id.startsWith(p.slice(0, -1))
                    : v.id === p
            )
        );
        
        scores[principle] = calculateA11yScore(ruleViolations);
    }
    
    return scores;
}

10. Remediation Priority Queue

/*
 * Not all a11y issues are equal. Prioritize fixes by:
 * 1. Impact (critical > serious > moderate > minor)
 * 2. Reach (how many users affected — page traffic)
 * 3. Effort (how hard to fix — auto-fixable vs manual)
 * 4. Legal risk (WCAG AA conformance requirements)
 *
 * AI generates a prioritized fix queue:
 */

function prioritizeRemediations(violations, pageAnalytics) {
    return violations
        .map(violation => {
            const impact = impactScore(violation.impact);
            const reach = reachScore(violation, pageAnalytics);
            const effort = effortScore(violation);
            const legal = legalScore(violation);
            
            return {
                ...violation,
                priority: (impact * 0.35) + (reach * 0.25) +
                          (effort * 0.15) + (legal * 0.25),
                autoFixable: canAutoFix(violation),
                estimatedFix: estimateFixDescription(violation),
            };
        })
        .sort((a, b) => b.priority - a.priority);
}

function canAutoFix(violation) {
    // These can be fixed with code transforms:
    const autoFixable = [
        'image-alt',           // Add alt="" for decorative, prompt for meaningful
        'label',               // Wrap input with label or add aria-label
        'button-name',         // Add aria-label to icon buttons
        'link-name',           // Add aria-label to icon links
        'html-has-lang',       // Add lang attribute to <html>
        'document-title',      // Add <title>
        'meta-viewport',       // Add viewport meta
        'color-contrast',      // Adjust color (if design tokens known)
    ];
    
    return autoFixable.includes(violation.id);
}

async function applyAutoFixes(violations, projectFiles) {
    const fixes = [];
    
    for (const violation of violations.filter(v => canAutoFix(v))) {
        for (const node of violation.nodes) {
            const fix = await generateAutoFix(violation.id, node, projectFiles);
            if (fix) {
                fixes.push(fix);
            }
        }
    }
    
    return fixes;
}

---

Trade-offs & Considerations

---

Best Practices

1. Layer your a11y testing: static analysis → runtime rules → AI contextual → visual audit — static analysis (eslint-plugin-jsx-a11y) catches missing attributes at build time for free; runtime tools (axe-core) catch computed style and DOM issues; AI analysis catches behavioral issues (missing keyboard navigation, focus management); stack all four layers for comprehensive coverage.

2. Auto-fix simple violations but require human review for behavioral fixes — adding alt="" to decorative images and aria-label to icon buttons can be automated safely; but adding keyboard navigation, focus traps, and ARIA state management requires human review to ensure the interaction pattern matches the design intent and doesn't break existing behavior.

3. Run axe-core in CI on every PR and block merges with critical violations — integrate axe-core with Playwright to scan every page/component; set the threshold to block PRs with "critical" or "serious" violations; this catches regressions automatically and establishes a11y as a first-class quality gate, not an afterthought.

4. Test with real screen reader simulation to catch announcement-level issues — axe-core tells you an element has an accessible name; it doesn't tell you if the screen reader announcement makes sense; simulate screen reader traversal of the accessibility tree to find issues like "Button: undefined" or "Image: DSC_0042.jpg" that are technically valid but unusable.

5. Track a11y score per WCAG principle over time and prioritize fixes by impact × reach × effort — dashboard the Perceivable/Operable/Understandable/Robust scores weekly; prioritize fixes that affect high-traffic pages with critical impact and are auto-fixable; this data-driven approach focuses effort where it matters most for real users.

---

Conclusion

AI-powered accessibility auditing extends traditional rule-based tools with contextual understanding. While axe-core checks ~100 DOM rules (missing alt text, invalid ARIA, color contrast), AI analyzes component source code to detect behavioral issues: custom widgets missing keyboard navigation, modals without focus traps, dynamic content without live regions, forms without programmatic error association. The AI identifies which ARIA pattern a component should follow (combobox, dialog, tablist) based on its behavior, then generates specific remediation code — adding keyboard handlers (ArrowUp/Down, Enter, Escape), ARIA attributes (role, aria-expanded, aria-activedescendant), and focus management (focus trap, focus return). Vision model analysis catches visual-only issues (text on busy backgrounds, small touch targets, color-only information) that DOM inspection misses. CI/CD integration runs axe-core on every PR to block regressions, while AI review is triggered for new or changed components to catch deeper issues. Screen reader simulation traverses the accessibility tree to verify that announcements are meaningful, not just technically present. The most effective approach is layered: static linting catches missing attributes at build time, runtime axe catches computed issues, AI catches behavioral gaps, and visual analysis catches perception issues — with auto-fixes for simple violations and human review for behavioral changes.