Accessibility Features

Read Aloud

Every post on crann.ai has a "Listen" button that reads the content aloud using natural-sounding text-to-speech. To use it:

• Click the Listen button below any post
• The post title and body will be read aloud using your browser's best available voice
• Use Pause and Resume to control playback
• Click Stop to end reading
• Adjust reading speed from 0.75x to 2x using the speed selector

Read Aloud uses your browser's built-in speech synthesis, so no data is sent to external services. Voice quality depends on your browser and operating system — Safari on macOS and iOS typically provides the most natural voices, followed by Chrome.

Keyboard navigation

All of crann.ai is navigable using a keyboard:

• Press Tab to move between interactive elements
• Press Enter or Space to activate buttons and links
• Press Escape to close modals and overlays
• A visible focus ring appears on the currently focused element

Skip to content

Press Tab when a page first loads to reveal a "Skip to main content" link. Activating this link jumps past the navigation directly to the page content, saving time for keyboard and screen reader users.

Reduced motion

crann.ai includes animations for scroll reveals, hover effects, cursor effects, and page transitions. If you prefer less motion, enable your operating system's reduced motion setting:

• macOS: System Settings → Accessibility → Display → Reduce motion
• iOS: Settings → Accessibility → Motion → Reduce Motion
• Windows: Settings → Accessibility → Visual effects → Animation effects (off)
• Android: Settings → Accessibility → Remove animations

When reduced motion is enabled, all animations on crann.ai are disabled automatically, including scroll reveals, hover effects, cursor effects, gradient orb animations, and hero text effects.

Screen reader support

crann.ai uses semantic HTML and ARIA landmarks to provide a clear page structure for screen readers. Navigation, main content, and footer areas are properly labelled. Decorative elements (background effects, grain overlays) are hidden from screen readers.

Colour contrast and themes

All AI-generated leaf themes are validated against WCAG AA contrast requirements:

• Body text meets a minimum 4.5:1 contrast ratio against its background
• Headings meet a minimum 3:1 contrast ratio (large text)
• Links and accent colours meet 4.5:1 contrast ratio
• Muted/secondary text meets a minimum 3:1 contrast ratio

If the AI generates colours that don't meet these thresholds, they are automatically adjusted while preserving the intended design aesthetic.

Voice input

In the messaging interface, you can use the microphone button to dictate messages instead of typing. This uses your browser's Web Speech API for speech-to-text transcription. Currently supported in Chrome and Edge.

Need help?

If you encounter any accessibility barriers or have suggestions for improvement, please contact us at accessibility@crann.ai. You can also read our Accessibility Statement for more details about our accessibility commitment.