Accessibility

The AI UX Kit is built on Radix UI — a headless component library that implements WAI-ARIA design patterns out of the box. Every interactive component ships with proper ARIA attributes, keyboard navigation, and focus management.

Radix UI Foundation

Over 20 Radix UI primitives power the kit's interactive components:

• Dialog — focus trap, Escape to close, aria-modal
• Dropdown Menu — arrow key navigation, Enter/Space to select, type-ahead search
• Select — keyboard-navigable option list with aria-selected
• Tabs — aria-tablist, arrow key navigation between tabs
• Tooltip — keyboard-focusable trigger, aria-describedby
• Switch — role="switch", Space to toggle
• Checkbox — Space to toggle, indeterminate state support
• Collapsible — aria-expanded, Enter/Space to toggle

Keyboard Navigation

All interactive components support full keyboard navigation:

Key	Action
Tab	Move focus to next focusable element
Shift+Tab	Move focus to previous element
Enter / Space	Activate buttons, links, toggles
Escape	Close dialogs, menus, popovers
Arrow Keys	Navigate menu items, tabs, radio groups
Home / End	Jump to first/last item in a list

Focus Management

• Focus trap in modals and dialogs — focus stays within the overlay until dismissed
• Focus restoration — when a dialog closes, focus returns to the trigger element
• Visible focus indicators — all focusable elements show a ring outline on keyboard focus
• Skip links can be added using the standard pattern for page-level navigation

Screen Reader Support

Components include semantic HTML and ARIA attributes:

{/* Button with loading state */}
<Button disabled aria-busy="true">
    <Spinner aria-hidden="true" />
    Generating...
</Button>

{/* Toast notification */}
<div role="status" aria-live="polite">
    Response copied to clipboard
</div>

Color Contrast

Design tokens are selected to meet WCAG 2.1 AA contrast ratios:

• Body text on background: minimum 4.5:1
• Large text on background: minimum 3:1
• Interactive elements: minimum 3:1 against adjacent colors

Best Practices

When building with the AI UX Kit, follow these guidelines:

1. Use semantic HTML — prefer <button> for actions and <a> for navigation
2. Add alt text to images, including AI-generated content
3. Provide labels for all form inputs using the Field component
4. Announce dynamic content with aria-live regions for AI responses
5. Don't rely on color alone — use icons, text, or patterns alongside color for status indicators
6. Test with a screen reader — VoiceOver (macOS), NVDA (Windows), or Orca (Linux)

Testing Accessibility

# Install axe-core for automated testing
npm install --save-dev @axe-core/react

# Or use the browser extension
# Chrome: axe DevTools
# Firefox: axe DevTools

Run the component explorer and use the browser accessibility tree inspector to verify ARIA roles and labels.