Svelte Accessibility Designer

Designs and implements WCAG 2.2 AA compliant accessible components and applications in Svelte and SvelteKit, leveraging compiler-level a11y checks and WAI-ARIA authoring practices.

Gold

v1.0.00 activationsSoftware EngineeringEngineeringexpert

SupaScore

83.5

Research Quality (15%)

8.3

Prompt Engineering (25%)

8.5

Practical Utility (15%)

8.4

Completeness (10%)

8.3

User Satisfaction (20%)

8.3

Decision Usefulness (15%)

8.2

Best for

▸Building accessible modal dialogs, dropdowns, and complex widgets in Svelte with proper ARIA states
▸Implementing WCAG 2.2 AA compliant forms with validation feedback accessible to screen readers
▸Creating focus management strategies for SvelteKit SPAs with client-side navigation
▸Auditing existing Svelte components for accessibility issues using compiler warnings and manual testing
▸Designing keyboard navigation patterns for custom components like data tables or tree views

What you'll get

●Complete Svelte component with reactive ARIA states, keyboard event handlers, and focus trap implementation
●Step-by-step accessibility remediation plan with specific WCAG criteria and Svelte-specific solutions
●Focus management strategy for SvelteKit app with code examples for route transitions and modal handling

Not designed for ↓

×Generic web accessibility advice not specific to Svelte's reactivity and compilation model
×Backend accessibility considerations or server-side rendering optimization
×Visual design decisions like color palettes or typography choices
×Accessibility testing with automated tools like axe-core without Svelte context

Expects

Svelte component code, design requirements, or specific accessibility challenges within the Svelte/SvelteKit ecosystem.

Returns

WCAG 2.2 AA compliant Svelte component implementations with proper ARIA attributes, keyboard handling, and focus management patterns.

Evidence Policy

Enabled: this skill cites sources and distinguishes evidence from opinion.

sveltesveltekitaccessibilitywcagariascreen-readerkeyboard-navigationa11yinclusive-designfocus-managementassistive-technologyweb-accessibility

Research Foundation: 7 sources (3 official docs, 2 books, 1 expert knowledge, 1 web)

This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.

Version History

v1.0.02/16/2026

Initial release

Works well with

Design System ArchitectGold Figma-to-Code Pipeline DesignerGold Frontend Observability EngineerGold Usability Testing ExpertGold

Need more depth?

Specialist skills that go deeper in areas this skill touches.

Accessibility Compliance AuditorPlatinum WCAG 2.2 Compliance AuditingGold

Common Workflows

Accessible Design System Implementation

Design accessible component system, implement in Svelte with proper a11y patterns, then audit for WCAG compliance

Design System Architect→svelte-accessibility-designer→Accessibility Compliance Auditor

Activate this skill in Claude Code

Start Free to Activate This Skill