Accessibility

The Yellow Card Design System is built to WCAG 2.1 AA standards. All components include accessible defaults.

Standards

• WCAG 2.1 Level AA compliance target
• Keyboard navigation for all interactive elements
• Screen reader tested with VoiceOver and NVDA
• Minimum 4.5:1 contrast ratio for normal text
• Minimum 3:1 contrast ratio for large text and UI elements

Keyboard Navigation

All interactive components support full keyboard navigation:

Component	Key	Action
Button	Enter / Space	Activate
Checkbox	Space	Toggle
Radio	Arrow Up/Down	Navigate options
Dialog	Escape	Close
Tabs	Arrow Left/Right	Switch tab
Dropdown	Arrow Up/Down	Navigate items
Dropdown	Enter	Select item
Dropdown	Escape	Close menu

Focus Management

• Visible focus indicators on all focusable elements
• Focus trapped within modal dialogs
• Focus restored on dialog close
• Logical tab order maintained

ARIA Patterns

Components implement standard ARIA patterns:

<!-- Button loading state -->
<button :aria-busy="loading" :aria-disabled="disabled">

<!-- Dialog -->
<div role="dialog" aria-modal="true" :aria-labelledby="titleId">

<!-- Alert -->
<div role="alert" aria-live="polite">

<!-- Tabs -->
<div role="tablist">
  <button role="tab" :aria-selected="active" :aria-controls="panelId">
</div>
<div role="tabpanel" :aria-labelledby="tabId">

Color Contrast

• All text colors meet 4.5:1 contrast against their backgrounds
• Interactive elements meet 3:1 contrast for boundaries
• Disabled states are exempt from contrast requirements but remain visible
• Error states use red-700+ for sufficient contrast

Testing

Components are tested with the Storybook a11y addon (axe-core) and manual keyboard/screen reader testing.

Run accessibility audits in Storybook:

npm run storybook
# Navigate to any story → Accessibility tab