Not everyone uses a mouse to explore a website. Good HTML must also make sense through a keyboard or screen reader.
What You Need to Know
Sudden motion or audio can be disorienting and disruptive. Prefer a player the visitor starts deliberately, and consider reduced-motion preferences when animations are part of the experience.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<video controls preload="none" width="480" poster="images/animation-still.jpg">
<source src="media/short-demo.mp4" type="video/mp4">
This browser cannot play the video.
</video>
<p>Visitors can choose when to begin the movement.</p>Let’s Read the Code
- <video>: The video element creates a video player and can include alternative formats.
- <source>: A source points to a media file or image choice with a type or other condition.
- controls: Controls asks the browser to provide its native audio or video player controls.
- preload: Preload hints how much media to fetch before playback.
What the example shows: Not starting motion automatically gives people control over when they are exposed to animations or sound.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
Try a different way of reading. Read only the headings and labels, or navigate through links without looking at the rest of the page. If the page still makes sense, the underlying HTML is probably doing an important part of its job.
Your Turn
Compare a paused preview with automatic playback from the visitor’s perspective.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- Autoplay can be distracting and may be blocked; consider reduced-motion preferences when adding CSS or scripts.
Key Takeaways
- Sudden motion or audio can be disorienting and disruptive.
- <video>: The video element creates a video player and can include alternative formats.
- A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.