CraftReactNative Documentation

CraftReactNative components are built with accessibility in mind, following WCAG guidelines and React Native accessibility best practices.

Color contrast

All color combinations in the theme system are designed with WCAG 2.1 AA guidelines in mind, aiming to ensure text remains readable and interactive elements are clearly distinguishable across all theme variants and modes.

Text on backgrounds maintains a minimum 4.5:1 contrast ratio
Large text (18px+) maintains a minimum 3:1 contrast ratio
Interactive elements are designed with sufficient contrast for visibility

Accessibility props support

All components accept React Native's AccessibilityProps, allowing full customization of accessibility behavior. You can provide custom labels, hints, roles, and other accessibility properties as needed.

Semantic roles

Components use appropriate semantic roles for screen readers:

Buttons, checkboxes, radio buttons, sliders, and other interactive elements have proper roles
Form inputs maintain native accessibility
Complex components like carousels and modals use appropriate roles and actions

Touch targets

Interactive components are designed with mobile accessibility best practices in mind:

Buttons are sized with appropriate minimum dimensions for easy tapping
Interactive elements include hitSlop for easier interaction
Touch targets are sized appropriately for their importance and context

Components are designed to work well with screen readers:

Proper labeling and hints throughout
Value announcements for dynamic content changes
Screen reader detection and adaptive behavior where needed
Focus management in modals and overlays

Best practices

When using components:

Provide labels: Always include accessibilityLabel for icon-only buttons or when the default label isn't descriptive enough
Add hints when needed: Use accessibilityHint for complex interactions that need explanation
Test with screen readers: Test with VoiceOver (iOS) and TalkBack (Android)
Maintain contrast: Don't override theme colors with low-contrast alternatives
Use semantic components: Prefer built-in components over custom implementations

Example

import { Button, Checkbox, Slider } from '@/craftrn-ui/components';
 
const Form = () => {
  return (
    <>
      <Button
        onPress={submit}
        accessibilityLabel="Submit registration form"
        accessibilityHint="Saves your information and creates your account"
      >
        Submit
      </Button>
 
      <Checkbox
        checked={agreed}
        onPress={setAgreed}
        accessibilityLabel="I agree to the terms and conditions"
      />
 
      <Slider
        min={0}
        max={100}
        value={volume}
        accessibilityLabel="Volume"
        accessibilityHint="Adjust volume level"
      />
    </>
  );
};

All accessibility features work automatically - you just need to provide appropriate labels and hints for your specific use case.

Accessibility