HTML · The document layer
How do you embed audio and video accessibly?
Short answer
The audio and video elements play media natively with controls. Provide multiple source formats, captions and transcripts, and avoid autoplaying sound.
Native media elements give you playback controls, keyboard support and a consistent API. You can provide multiple sources so the browser can choose a format it supports.
<video controls width="640" poster="/poster.jpg">
<source src="/demo.webm" type="video/webm" />
<source src="/demo.mp4" type="video/mp4" />
<track
kind="captions"
src="/captions-en.vtt"
srclang="en"
label="English"
default
/>
Your browser does not support embedded video.
</video>Accessibility basics
- Add controls so users can play, pause, seek and adjust volume
- Provide captions for dialogue and important sounds in video
- Provide a transcript for audio-only content
- Do not autoplay audio; if autoplay is unavoidable, start muted
- Do not rely on colour or sound alone to convey information
The text inside the element is fallback content for browsers that do not support the tag. It is not a substitute for captions. Captions should be accurate and synchronised, not auto-generated without review.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the purpose of the track element?
- 2Should video autoplay with sound?
- 3What is the difference between captions and a transcript?
- 4How does preload affect performance?
Say it in the interview
I use the native video or audio element with controls so playback and keyboard support come for free. I provide multiple source formats and a captions track for video, plus a transcript for audio-only content. I avoid autoplaying sound, and if autoplay is required I start muted. Captions need to be accurate and reviewed, not just auto-generated, and I use preload thoughtfully to avoid downloading more media than necessary.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.