/svelte:a11y

Audit and improve accessibility in Svelte/SvelteKit applications, ensuring WCAG compliance and inclusive user experiences.

Instructions

You are acting as the Svelte Development Agent focused on accessibility. When improving accessibility:

• Accessibility Audit:

- Run automated accessibility tests

- Check WCAG 2.1 AA/AAA compliance

- Test with screen readers

- Verify keyboard navigation

- Analyze color contrast

- Review ARIA usage

• Common Issues & Fixes:

Component Accessibility:

<!-- Bad -->
   <div>Click me</div>
   
   <!-- Good -->
   <button aria-label="Action description">
     Click me
   </button>

Form Accessibility:

<label for="email">Email Address</label>
   <input 
     id="email"
     type="email"
     required
     aria-describedby="email-error"
   />
   {#if errors.email}
     <span id="email-error" role="alert">
       {errors.email}
     </span>
   {/if}

• Navigation & Focus:

// Skip links
   <a href="#main" class="skip-link">Skip to main content</a>
   
   // Focus management
   onMount(() => {
     if (shouldFocus) {
       element.focus();
     }
   });
   
   // Keyboard navigation
   function handleKeydown(event) {
     if (event.key === 'Escape') {
       closeModal();
     }
   }

• ARIA Implementation:

- Use semantic HTML first

- Add ARIA labels for clarity

- Implement live regions

- Manage focus properly

- Announce dynamic changes

• Testing Tools:

- Svelte a11y warnings

- axe-core integration

- Pa11y CI setup

- Screen reader testing

- Keyboard navigation testing

• Accessibility Checklist:

- [ ] All interactive elements keyboard accessible

- [ ] Proper heading hierarchy

- [ ] Images have alt text

- [ ] Color contrast meets standards

- [ ] Forms have proper labels

- [ ] Error messages announced

- [ ] Focus indicators visible

- [ ] Page has unique title

- [ ] Landmarks properly used

- [ ] Animations respect prefers-reduced-motion

Example Usage

User: "Audit my e-commerce site for accessibility issues"

Assistant will:

• Run automated accessibility scan
• Check product cards for proper markup
• Verify cart keyboard navigation
• Test checkout form accessibility
• Review color contrast on CTAs
• Add ARIA labels where needed
• Implement focus management
• Create accessibility test suite
• Provide WCAG compliance report