Accessibility

Fortune Kit components are built with accessibility as a core requirement, not an afterthought.

Standards

All components follow:

• WCAG 2.1 AA — Minimum compliance level
• WAI-ARIA 1.2 — Proper roles and attributes
• Section 508 — US accessibility requirements

Keyboard Navigation

Every interactive component is keyboard accessible:

Component	Keys
FkLeaderboard	↑/↓ navigate, Enter select
FkWheel	Space/Enter to spin
FkQuiz	1-4 select option, → next

Screen Reader Support

Components announce state changes:

<!-- FkResultWin announces -->
<div role="alert" aria-live="polite">
  You won $100!
</div>

<!-- FkLeaderboard announces position changes -->
<tr aria-label="Player JohnDoe, rank 3, score 5000, moved up 2 positions">

Color Contrast

All color combinations meet WCAG AA (4.5:1 for normal text):

Foreground	Background	Ratio
--fk-color-foreground-DEFAULT	--fk-color-background-DEFAULT	15.8:1
--fk-color-win-DEFAULT	--fk-color-background-DEFAULT	6.2:1
--fk-color-lose-DEFAULT	--fk-color-background-DEFAULT	5.4:1

Reduced Motion

Animations respect user preferences:

@media (prefers-reduced-motion: reduce) {
  .fk-wheel,
  .fk-result,
  .fk-leaderboard__row {
    transition: none !important;
    animation: none !important;
  }
}

Components also expose a reduceMotion prop:

<FkWheel :segments="segments" reduce-motion />

Focus Management

Visible focus indicators on all interactive elements:

.fk-button:focus-visible {
  outline: 2px solid var(--fk-color-primary-DEFAULT);
  outline-offset: 2px;
}

Testing Accessibility

Storybook

Every component has a11y tests in Storybook:

// FkResultWin.stories.ts
export const AccessibilityTest = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    await expect(canvas.getByRole('alert')).toBeInTheDocument()
    await expect(canvas.getByRole('alert')).toHaveAccessibleName()
  }
}

Manual Testing

We test with:

• VoiceOver (macOS/iOS)
• NVDA (Windows)
• Keyboard-only navigation
• High contrast mode
• 200% zoom