Audio player

Accessibility

Overview

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.

What you must provide

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.

Keyboard behavior

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.

Semantics and roles

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").

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.

Known caveats

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.

Audio Player / API and Development

AI Elements / Usage

On this page

Overview

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Screen reader announcements

Touch targets and responsive behavior

Known caveats

Audio player

Accessibility

Overview

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.

What you must provide

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.

Keyboard behavior

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.

Semantics and roles

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").

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.

Known caveats

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.

Audio Player / API and Development

AI Elements / Usage

On this page

Overview

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Screen reader announcements

Touch targets and responsive behavior

Known caveats