Video

A video component embeds a media player with accessible controls for play, pause, volume, and captions, ensuring keyboard operability and text alternatives for users who cannot see or hear the content.

Demo

Use the playback controls below the video to play, pause, and adjust volume using only the keyboard. Tab through the controls and press Space or Enter to activate each one. Enable captions if available and observe how the caption track is announced and displayed. Check whether a transcript is also provided alongside the player.

What to Observe

• All player controls — play, pause, volume, seek, and captions toggle — are reachable and operable by keyboard alone.
• Each control has an accessible label so screen readers can announce its purpose rather than just "button."
• Captions can be enabled and are synchronized with the spoken audio content in the video.
• A text transcript of the video's audio content is provided so users who cannot play the video at all can still access the information.
• The video does not autoplay with sound, avoiding a disorienting experience for screen reader users whose audio output would be interrupted.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Video element: The native <video> element that contains the media source and hosts child track elements for captions and descriptions.
2. Caption track: A <track> element with kind="captions" pointing to a WebVTT file that provides synchronized text for spoken dialogue and important audio cues.
3. Playback controls: Buttons for play/pause, volume, mute, and full-screen, each with an accessible name through visible text or aria-label.
4. Progress/seek bar: A slider or range input allowing users to move to any point in the video, labeled so screen readers can announce the current playback position.
5. Captions toggle: A button that enables or disables the caption track, with its current state (on or off) communicated to assistive technology.
6. Transcript: A separate section of the page containing the full text of the video's audio content, available to users regardless of their ability to play the media.

Accessibility Behavior

• The video must not autoplay with audio — doing so disrupts screen reader users who rely on audio output to navigate the page.
• All custom player controls must be operable by keyboard and must have accessible labels describing their function and, where applicable, their current state.
• Captions must be provided for all spoken dialogue and meaningful audio content, synchronized with the playback timeline.
• An audio description track or a descriptive transcript must be available for visual content in the video that is not conveyed through the audio alone.
• A full text transcript must be provided so users who cannot play the video can still access its content.
• If the video contains flashing or strobing content, a warning must precede it so users with photosensitive conditions can make an informed choice before playing.

Common Mistakes

• Autoplaying video with sound, which interrupts screen readers and can disorient users who are not expecting audio to begin.
• Providing no captions or providing auto-generated captions without reviewing them for accuracy, leaving deaf and hard-of-hearing users with inaccurate or missing dialogue.
• Building custom player controls as non-interactive <div> elements that cannot receive keyboard focus or be activated without a mouse.
• Omitting a transcript, which is the only way some users — including those on metered connections, in quiet environments, or with certain cognitive disabilities — can access the content.
• Labeling the play button only with an icon and no text alternative, leaving screen reader users with no way to identify or activate it.

Why This Matters

Video is one of the richest formats for delivering information, but it is also one of the most exclusive when implemented without accessibility in mind. Deaf users miss all spoken content without captions. Blind users miss all visual-only information without audio descriptions. Users on slow connections or in noise-sensitive environments need transcripts. Users with motor disabilities need keyboard-operable controls. Each of these groups is shut out entirely by a single missing accommodation. Video is also increasingly used for onboarding, training, and compliance content — areas where being locked out has direct consequences for participation and employment. Getting video accessibility right means the content reaches every person it was intended for.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code