Demo 02 · Audio and accessibility

Accessible audio player

Radio, podcasts, and DJ sessions. Audio is the core of this kind of product. This player works for everyone: keyboard users, screen reader users, and people who turn off animation.

Morning Becomes Eclectic

Morning Set, Pt. 1

The Resident

Space play/pause · J back 15s · L forward 15s · arrow keys on the seek bar scrub

Try it with the keyboard. Press Tab to a control, then Space, J, L, or the arrow keys on the seek bar.

How it meets WCAG

Full keyboard control2.1.1 Keyboard (A)
Every control is a real button or input you can reach with Tab. Space or K plays and pauses. J and L skip 15 seconds. Arrow keys scrub the seek bar.
Visible focus2.4.7 Focus Visible (AA)
One focus ring, set by a design token, is never removed. Keyboard users always know where they are.
Status announcements4.1.3 Status Messages (AA)
A polite live region announces track changes and play or pause. It never steals focus.
Clear labels4.1.2 Name, Role, Value (A)
Icon buttons carry real labels. The seek bar speaks its position, like one minute twenty three of four minutes.
Color contrast1.4.3 Contrast (AA)
Text and controls clear 4.5 to 1 against their background. The bright accent is only used where it passes.
Respects motion settings2.3.3 Animation from Interactions (AAA)
All motion stops when the visitor asks for reduced motion. Nothing important depends on animation.