## Commitment to Accessibility Every Kinetik component is built with accessibility in mind. We follow WCAG 2.1 guidelines and test with screen readers. Beautiful animations should never come at the cost of usability. ## Reduced Motion About 35% of adults experience vestibular dysfunction at some point. Kinetik respects the `prefers-reduced-motion` media query to ensure animations don't cause discomfort. ### Using Framer Motion's Hook ```tsx import { useReducedMotion } from 'framer-motion' function AnimatedCard() { const prefersReducedMotion = useReducedMotion() return ( Card content ) } ``` ### Global CSS Fallback Add this to your global CSS as a safety net: ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } ``` ### Framer Motion Config For app-wide reduced motion support: ```tsx import { MotionConfig } from 'framer-motion' function App({ children }) { return ( {children} ) } ``` The `reducedMotion="user"` setting automatically respects the user's OS preference for all nested motion components. ## Keyboard Navigation All interactive Kinetik components support keyboard navigation: | Key | Action | |-----|--------| | **Tab** | Move forward between focusable elements | | **Shift + Tab** | Move backward between focusable elements | | **Enter** | Activate buttons, submit forms, follow links | | **Space** | Activate buttons, toggle checkboxes/switches | | **Escape** | Close modals, dropdowns, and popovers | | **Arrow keys** | Navigate within menus, tabs, and selects | ### Focus Management When opening modals, focus should move to the first focusable element: ```tsx function Modal({ isOpen, onClose, children }) { const closeButtonRef = useRef(null) useEffect(() => { if (isOpen) { closeButtonRef.current?.focus() } }, [isOpen]) return ( {isOpen && ( )} ) } ``` ## Focus Indicators Kinetik uses visible focus indicators that meet WCAG requirements: ```css :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } ``` Using Tailwind CSS: ```tsx ``` Never remove focus indicators entirely. If the default outline doesn't fit your design, replace it with a visible alternative. ## Screen Readers Components include proper ARIA attributes for screen reader compatibility. ### ARIA Labels ```tsx // Icon-only button needs aria-label // Text content provides implicit label Submit Form ``` ### ARIA Live Regions Announce dynamic content changes: ```tsx function Toast({ message }) { return ( {message} ) } ``` ### Common ARIA Patterns ```tsx // Loading button // Expandable section // Tab panel

Content

``` ## Color Contrast All Kinetik color combinations meet WCAG AA standards: - **Normal text**: 4.5:1 minimum contrast ratio - **Large text**: 3:1 minimum contrast ratio - **UI components**: 3:1 minimum contrast ratio ### Don't Rely on Color Alone Always provide additional indicators: ```tsx // Good: Color + icon + text

{hasError && (

)}

``` ## Semantic HTML Use semantic elements for better accessibility: ```tsx

Article Title

Content...

``` ## Testing Accessibility ### Manual Testing 1. **Keyboard only**: Navigate without a mouse 2. **Screen reader**: Test with VoiceOver (Mac) or NVDA (Windows) 3. **Zoom**: Test at 200% zoom 4. **Color blindness**: Use Chrome DevTools simulation ### Automated Testing ```bash npm install -D @axe-core/react ``` ### Browser Extensions - **axe DevTools** - Comprehensive accessibility testing - **WAVE** - Visual accessibility feedback - **Lighthouse** - Built into Chrome DevTools ## Accessibility Checklist - [ ] All interactive elements are keyboard accessible - [ ] Focus is visible and managed correctly - [ ] Images have alt text - [ ] Form fields have labels - [ ] Color contrast meets WCAG AA - [ ] Animations respect `prefers-reduced-motion` - [ ] Proper heading hierarchy - [ ] Error messages are accessible ## Next Steps - Learn about [Performance](/docs/core-concepts/performance) optimization - Read our blog post on [Making Animations Accessible](/blog/accessible-animations)