Capability

Web Accessibility & VPAT Compliance

Engineering WCAG 2.1 AA compliant frontends from the token layer up — combining contrast-safe design tokens, semantic Web Components, automated axe-core CI testing, and rigorous VPAT evaluation workflows.

78% → 94%Audit ScoreInternal enterprise compliance

60+Remediated ComponentsReact & Angular Web Components

WCAG 2.1 AAConformance StandardSection 508 & EN 301 549

100%Token Contrast SafetyZero manual color pair errors

4-Pillar Accessibility Strategy

How accessibility is operationalized across the entire software development lifecycle.

1. Token-Level Guarantees

Design Tokens

Contrast ratios (4.5:1 for body text, 3:1 for large text and UI borders) are codified directly into semantic tokens. Designers and developers cannot pick non-compliant combinations.

// Enforced contrast contracts--ksv-ds-text-primary: #0f172a; /* 14.5:1 on light canvas */--ksv-ds-border-focus: #4f46e5; /* 3:1 focus ring */

2. Semantic Component Anatomy

ARIA 1.2 & HTML5

Framework-agnostic Web Components enforce native semantic tags (<button>, <dialog>), WAI-ARIA 1.2 keyboard navigation patterns (Roving tabindex, Escape dismissals), and focus management.

// Accessible focus & ARIAtabIndex={focused ? 0 : -1}aria-modal="true" role="dialog"

3. Automated CI/CD Guardrails

axe-core & Playwright

Automated accessibility regression testing with axe-core and Playwright runs on every pull request, flagging color contrast, missing labels, landmark errors, and broken heading hierarchies before merge.

// Playwright a11y assertionconst results = await new AxeBuilder({ page }).analyze();expect(results.violations).toEqual([]);

4. VPAT & Assistive Tech Auditing

Section 508

Conducted formal Voluntary Product Accessibility Template (VPAT) evaluations. Manual testing with screen readers (VoiceOver, NVDA, JAWS), keyboard-only workflows, and 200% browser zoom reflow.

// Assistive tech coverageVoiceOver (macOS/iOS) • NVDA (Windows)WCAG 2.1 Success Criteria 1.4.3, 2.1.1, 2.4.7

Interactive Accessibility Tools

Explore live token contrast ratio calculations and simulated accessible keyboard focus trapping.

Token Color Pair Preset

Foreground Tokenvar(--ksv-ds-text-primary) (#0f172a)

Background Tokenvar(--ksv-ds-bg-canvas) (#ffffff)

High contrast baseline for all body and heading content.

WCAG 2.1 AA Sample

Designing with contrast-safe tokens ensures that text, interactive controls, and status indicators remain fully legible to all users regardless of vision conditions or ambient lighting.

17.85:1Calculated Ratio

✓ AA Body (4.5:1)✓ AA Large/UI (3:1)✓ AAA (7:1)

Built with the Design System Token Pipeline

See how these accessible tokens and components are authored, compiled with Style Dictionary, and packaged on npm.

Explore Design System →