AudioPlayer is a compact cluster of IconButtons and a Slider, so the accessibility story builds on those primitives. The component handles button roles, keyboard activation, and slider semantics. Your app is responsible for localized button titles, the accessible name of the cluster itself, error and loading announcements, and coordination when multiple players appear on one view.
What the component handles
- Play, pause, mute, and skip controls render as buttons with
aria-label populated from the configured titles.
- Scrub slider uses the shared
Slider primitive with standard ARIA pattern (role="slider", aria-valuenow, aria-valuemin, aria-valuemax).
- Disabled state while loading is exposed via
aria-disabled; interaction is suppressed but controls remain reachable.
- Timestamps render as static text when
showTimeStamps is on, available to screen readers on focus traversal through the cluster.
- Localized, verb-first titles for each
IconButton: "Play recording", "Pause recording", "Skip forward 15 seconds", "Mute", "Unmute".
- An accessible name for the player when multiple instances live on one page (e.g. associate each with a row title via
aria-labelledby on a wrapping region, or include the context in the tooltip text).
- Inline, accessible error and loading copy when the source is async or fails to load—silent broken buttons are worse than a clear message.
- A controller that pauses sibling players when one starts, so assistive tech users aren't hit with overlapping audio they can't isolate.
- Tab / Shift+Tab: move between play/pause, slider, skip buttons, and any auxiliary controls (speed, volume) in reading order.
- Enter or Space: toggle play/pause; activate skip and mute.
- Arrow keys (while slider is focused): seek by the slider's step; Home / End jump to the start and end of the clip.
- Escape: no built-in Escape handling; if your product maps Escape to stop playback at a higher level, wire it to
ref.pause.
- Buttons use native
<button>; don't wrap with additional role="button".
- The scrub slider carries
aria-valuenow in seconds with a matching aria-valuetext in mm:ss format for human-readable current position.
- When the cluster is embedded in a list or table cell, mark the row context so screen reader users know which clip they're operating on ("Call recording, caller 555-0145, 2:14 duration").
Screen reader announcements
- Loading: announce "Loading audio" when an async
src resolver is in flight.
- Error—announce the failure inline ("Audio unavailable—retry"), not in a toast that disappears before the user reaches it.
- Play / pause: no extra announcement needed; the label change from "Play recording" to "Pause recording" is enough.
Touch targets and responsive behavior
IconButton defaults meet the 44×44 target; verify when you override size.- The scrub slider needs a generous horizontal track for touch-accurate seeking. On narrow widths, keep the slider visible and shrink auxiliary controls first.
- Timestamp text is static and does not announce changes during playback. Users who rely on timestamps should pause and read; continuous announcement would be too chatty.
AudioPlayer does not autoplay. Don't add autoplay in a wrapper—audio starting without user action is both a WCAG concern and a dispatch UX hazard.- Multiple instances on one view will play simultaneously unless your controller coordinates them. Lift active-player state into context when a page can host more than one.
