ui/packages/ui-accessibility

@ui/accessibility

React hooks for accessibility features and device detection.

Installation

pnpm add @ui/accessibility

Features

• 🎯 Zero dependencies - Only peer dependencies on React
• ♿ Accessibility-first - Respects user preferences
• 📱 Device detection - Touch vs mouse optimization
• 🎨 Framework agnostic - Works with any React setup
• 📦 Tiny bundle - Minimal overhead

Hooks

useReducedMotion()

Detects if the user has enabled "reduced motion" in their OS accessibility settings.

import { useReducedMotion } from '@ui/accessibility'
import { motion } from 'framer-motion'

function AnimatedComponent() {
  const prefersReducedMotion = useReducedMotion()

  return (
    <motion.div
      animate={prefersReducedMotion ? {} : { x: 100, opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Content
    </motion.div>
  )
}

useTouchDevice()

Detects if the device supports touch input.

import { useTouchDevice } from '@ui/accessibility'

function InteractiveElement() {
  const isTouchDevice = useTouchDevice()

  return (
    <button
      style={{
        minHeight: isTouchDevice ? '44px' : '32px', // Larger touch targets
        cursor: isTouchDevice ? 'pointer' : 'default'
      }}
    >
      {isTouchDevice ? 'Tap' : 'Click'} me
    </button>
  )
}

Best Practices

Respecting Reduced Motion

Always check useReducedMotion() before applying:

• Parallax scrolling effects
• Particle animations
• Auto-playing videos
• Rapid color changes
• Any motion that could cause discomfort

Touch-Friendly Design

When useTouchDevice() returns true:

• Increase touch target size (minimum 44x44px)
• Remove hover-dependent interactions
• Simplify complex gestures
• Consider mobile-first layouts

Browser Support

These hooks use standard Web APIs supported by all modern browsers:

• matchMedia() for reduced motion detection
• ontouchstart, maxTouchPoints, and media queries for touch detection

License

MIT © Lilith Platform