Media Attributes

title: "Media Attributes — controls, preload, and loop for Accessibility" description: "Learn how HTML media attributes affect accessibility and how to use controls, preload, loop, and other attributes responsibly." weight: 10 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, media]

HTML media attributes like controls, preload, loop, and muted have significant accessibility implications for how users interact with audio and video.

## What You'll Learn

How each media attribute affects accessibility and best practices for each.

## Why It Matters

The wrong combination of attributes can make media unusable. For example, missing controls means keyboard users cannot play the video.

## Real-World Use

A video on a product page has the controls attribute so users can play, pause, and adjust volume. Without controls, keyboard users cannot start the video.

## Controls Attribute

```html
<!-- Required for accessibility: provides play/pause, volume, progress -->
<video src="tutorial.mp4" controls>
</video>

<!-- Without controls, provide custom accessible controls -->
<video src="tutorial.mp4">
</video>
<button aria-label="Play video" onclick="playVideo()">Play</button>

Preload Attribute

<!-- preload="none" saves bandwidth but delays playback -->
<video src="large-file.mp4" controls preload="none">

<!-- preload="metadata" loads duration and dimensions -->
<video src="tutorial.mp4" controls preload="metadata">

<!-- preload="auto" loads the full video -->
<video src="short-clip.mp4" controls preload="auto">

Loop Attribute

<!-- Looping video must have a pause mechanism -->
<video src="background-loop.mp4" autoplay muted loop controls>
</video>

Common Mistakes

1. Missing controls attribute

Without controls and no custom controls, the media cannot be operated by keyboard users.

2. Loop without controls

Looping video without controls traps users in endless playback.

3. preload=auto on all videos

Large videos with preload=auto consume bandwidth unnecessarily. Use metadata for long videos.

4. muted attribute hidden

If muted is required (for auto-play), indicate it visually so users know to unmute.

5. No fallback content

If the browser cannot play the video format, provide a message or link to download.

Practice Questions

1. What attribute provides built-in media controls? The controls attribute provides play/pause, volume, and progress controls.

2. What preload value is best for accessibility and performance? preload="metadata" loads duration and dimensions without downloading the full file.

3. Why is looping without controls problematic? Users cannot stop the playback. Always provide controls or a pause button for looping media.

Challenge: Build a video element with controls, preload=metadata, and a fallback message for unsupported browsers.

FAQ

Mini Project

Create a video element with all recommended attributes: controls, preload=metadata, poster, and a fallback message. Test on multiple browsers.

What's Next

Learn how to perform Video Testing to verify media accessibility.