Svelte A11y Launcher

Audit and remediate accessibility issues in Svelte and SvelteKit applications with automated WCAG compliance checking, screen reader testing guidance, and inclusive component patterns.

When to Use This Command

Run this command when...

• You need to audit an existing Svelte application for WCAG 2.1 AA or AAA compliance before a release or regulatory deadline
• You want to fix specific accessibility failures such as missing ARIA labels, keyboard navigation gaps, or color contrast violations
• Your team is building new components and needs accessible patterns with proper semantic HTML, focus management, and live region announcements

Do NOT use this command when...

• You are working with a non-Svelte framework -- use a framework-agnostic a11y audit tool instead
• You need only automated lighthouse scores without code-level remediation guidance

Quick Start

Copy
# .claude/commands/svelte-a11y-launcher.md
# Audit Svelte accessibility
Audit accessibility for: $ARGUMENTS

Copy
# Run the command
claude "svelte-a11y-launcher audit navigation menu and modal dialog components"

Expected output:
- WCAG violation inventory with severity ratings
- Code-level fixes for each violation
- Keyboard navigation test plan
- Screen reader announcement verification
- Accessible component pattern recommendations

Core Concepts

Concept	Description
WCAG Compliance	Web Content Accessibility Guidelines levels A, AA, and AAA
ARIA Attributes	Accessible Rich Internet Applications roles, states, and properties
Focus Management	Controlling keyboard focus order, trapping, and restoration
Live Regions	Dynamic content areas announced by screen readers via aria-live
Semantic HTML	Using correct HTML elements (nav, main, button) instead of generic divs

A11y Audit Pipeline:

  Svelte Components
       |
  [Automated Scan]
       |
  +----+----+----+
  |    |    |    |
 ARIA Focus Color Semantic
  |    |    |    |
  [Severity Rating]
       |
  [Generate Fixes]
       |
  [Verify with Screen Reader]
       |
  Compliant Components

Configuration

Parameter	Default	Description
WCAG Level	AA	Target compliance level (A, AA, or AAA)
Scan Scope	All components	Which components or routes to audit
Fix Mode	Report + code	Whether to generate reports only or include code fixes
Testing Tools	svelte-check + axe	Automated tools used for violation detection
Screen Reader	VoiceOver guidance	Screen reader testing instructions for verification

Best Practices

1. Audit early and often -- run this command during development, not just before release. Fixing accessibility issues late is significantly more expensive
2. Start with automated checks -- let the scanner catch low-hanging fruit like missing alt text and contrast issues before moving to manual keyboard and screen reader testing
3. Test keyboard navigation end-to-end -- tab through every interactive element in your component. If you cannot reach or activate something without a mouse, it fails
4. Use semantic HTML first -- a button element with native click handling is inherently more accessible than a div with onclick. Reserve ARIA for cases where HTML semantics are insufficient
5. Test with real assistive technology -- automated tools catch roughly 30-40% of accessibility issues. Screen reader testing with VoiceOver or NVDA catches the rest

Common Issues

1. svelte-check reports false positives -- some Svelte-specific patterns like reactive declarations confuse generic a11y linters. Review each flagged item manually before dismissing
2. Focus is lost after component transitions -- Svelte transitions can destroy and recreate DOM nodes, dropping focus. Use tick() and programmatic focus management after transitions
3. Dynamic content not announced -- content added reactively needs aria-live regions. Wrap dynamic status messages in an element with aria-live="polite" for screen reader announcement