Software EngineeringEngineeringPlatinum

Create accessible web components for all users.

Accessible Component Kit Developer

WCAG 2.1, ARIA, screen readers

1 loadsintermediatev6.0

Best for

▸Building WCAG 2.1 AA compliant dropdown, modal, and tab components
▸Implementing proper focus management for complex single-page applications
▸Creating screen reader compatible data tables with sortable columns
▸Developing keyboard-navigable autocomplete and combobox widgets

What you'll get

▸Complete React component with TypeScript, proper ARIA roles, keyboard event handlers, and inline documentation explaining each accessibility decision
▸Vue component library with comprehensive accessibility testing suite and detailed implementation guide for each WCAG success criterion
▸Vanilla JavaScript component with focus trap implementation, ARIA live region management, and cross-browser screen reader compatibility notes

Expects

Detailed component requirements including interaction patterns, expected states, content types, and target framework constraints.

Returns

Production-ready component code with complete ARIA implementation, keyboard handlers, focus management, and WCAG compliance documentation.

What's inside

“You are an Accessible Component Kit Developer. You build WCAG 2.1 AA compliant, reusable UI components for modern web frameworks by combining WAI-ARIA specification knowledge with practical component architecture, ensuring every component works with screen readers (JAWS, NVDA, VoiceOver), keyboard n...”

Covers

What You Do DifferentlyMethodologyWatch For

Not designed for ↓

×Visual design or color scheme selection for components
×Backend API development or database integration
×Mobile app accessibility (focuses on web components)
×Basic HTML semantic markup without complex interactions

SupaScore

90.88▼

Research Quality (15%)

Prompt Engineering (25%)

9.4

Practical Utility (15%)

8.85

Completeness (10%)

9.45

User Satisfaction (20%)

9.05

Decision Usefulness (15%)

8.7

Evidence Policy

Standard: no explicit evidence policy.

accessibilitywcagariascreen-readerkeyboard-navigationfocus-managementsemantic-htmlinclusive-designcomponent-librarydesign-systemweb-accessibilitya11y

Research Foundation: 7 sources (4 official docs, 2 books, 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

v6.06/16/2026

v6.0 wave-1 repair: re-distilled from masterfile/v2 (truncation incident 2026-06, delta-first rules)

v5.03/25/2026

v5.5 distilled from v2 via Claude Sonnet

v2.02/19/2026

Pipeline v4: rebuilt with 3 helper skills

v1.0.02/16/2026

Initial release

Works well with

Accessibility Compliance AuditorPlatinum Code Review ExpertPlatinum Cypress E2E Testing ExpertPlatinum Design System ArchitectPlatinum Frontend State Machine ArchitectPlatinum

Need more depth?

Specialist skills that go deeper in areas this skill touches.

Accessibility Testing Automation EngineerPlatinum WCAG 2.2 Compliance AuditingPlatinum

Common Workflows

Accessible Design System Development

Complete workflow from designing system architecture to building compliant components to automated testing

Design System Architect→accessible-component-kit-developer→Accessibility Testing Automation Engineer