How do I expose loading to screen readers?

Use role=progressbar with aria-valuenow/aria-valuemax and announce state changes with aria-live=polite.

What keys should control the widget?

Support Tab navigation, Space/Enter for activation, and Arrow keys for scrubbing where applicable.

How do I respect reduced motion?

Use @media (prefers-reduced-motion) and avoid flashy transitions for critical flows.

Accessibility with TTS in the Browser: ARIA, Screen Readers, and Inclusive Patterns

TTS features can either remove barriers or create new ones. This guide collects WCAG‑aligned patterns to make Kokoro‑powered experiences usable with screen readers, keyboard navigation, and user preferences.

Controls and Roles

Use semantic buttons for play/pause with clear labels (aria-label updates statefully).
Expose progress with role="progressbar" and aria-valuenow/aria-valuemax.
Announce status changes via polite live regions (aria-live="polite").

Keyboard Navigation

Ensure Tab, Space/Enter, and Arrow keys operate controls.
Provide a visible focus ring and predictable focus order.
Offer a skip link to jump past the TTS demo widget.

Captions and Transcripts

Render the spoken text alongside audio; keep it selectable and copyable.
For long audio, show section headers and timestamps for quick scanning.

Motion and Feedback

Respect @media (prefers-reduced-motion) and avoid flashy animations.
Use non‑color indicators (icons, text) in addition to color cues.

User Preferences

Persist voice, speed, and volume preferences in local storage.
Provide a reset option and accessible confirmation messages.

Testing Checklist

Screen readers: NVDA/JAWS on Windows, VoiceOver on macOS/iOS.
Keyboard‑only navigation across all interactive elements.
Contrast ratios ≥ 4.5:1 for text; ≥ 3:1 for large text and UI.

Author: Kokoro Web Team • Last updated 2025‑01‑15