Videos on a website should look good, load fast, and work for everyone. This guide outlines best practices that balance visual quality, performance, and accessibility, whether a video is a short background accent or a primary piece of content. The recommendations below cover technical basics like size and format, design choices that prevent distraction, and accessibility requirements that ensure people with disabilities can fully understand and control video content. Following these practices helps videos play smoothly across devices, reduces load times, supports assistive technologies, and aligns with federal accessibility expectations under the Americans with Disabilities Act (ADA) and WCAG 2.1 Level AA standards.
General Recommendations
- Aspect Ratio: 16:9 (Standard widescreen).
- Resolution (Common) 720p (HD): 1280×720 pixels (Good balance of quality & size).
- Format: .MP4 (widely supported).
- File Size: Keep it small for web performance (e.g., under 20MB, ideally <10MB for backgrounds).
- Frame Rate: 24fps or 30fps.
For Background/Hero Videos (Special Considerations)
- Length: Short (e.g., under 20 seconds).
- Speed: Slow enough to add detail, but not distracting.
- Looping: Design to loop seamlessly. The “Loop” function is set in Drupal.
- Focus: Shallow depth of field (blurry background) helps with compression.
- Responsiveness: This is preset in both Drupal (main www) and WordPress (blog) sites.
- Optimization: Compress videos before uploading to balance quality and file size.
Accessibility
The U.S. Department of Justice (DOJ) doesn’t list specific video rules in its regulations by itself, but the DOJ enforces the Americans with Disabilities Act (ADA) for websites and points to well-accepted accessibility standards. That means videos on a website need to be made accessible so people with disabilities can use the same content as everyone else. Most of the DOJ’s current guidance refers to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA as the standard to meet.
Here are the key accessibility traits for videos that come from that DOJ guidance and related ADA interpretation:
1. Captions on Videos
People who are deaf or hard of hearing must be able to follow what is said and sounds in the video.
- Closed captions show the spoken words and sound effects as text on the screen.
- These must be synchronized with the audio so they appear at the right times.
- For example: if a mayor says “Welcome” at 0:03 in a city announcement video, the caption should show the word at that moment.
- WCAG calls this Captions (Prerecorded), a key success criterion.
2. Audio Description
People who are blind or have low vision benefit when visual actions are described through audio.
- Audio description adds short narration that describes what’s happening visually in the video (e.g., “The camera shows an aerial view of the park”).
- WCAG includes Audio Description (Prerecorded) as part of accessible video content.
- This helps someone understand non-spoken information that is shown visually.
3. Accessible Controls
All users should be able to play, pause, rewind, and adjust sound without barriers.
- For example, keyboard users (those who cannot use a mouse) should be able to tab to the video player controls and use keys to operate them.
- This matches the broader keyboard accessible requirements in WCAG.
4. Transcripts
Providing a text transcript of the video gives another way for someone to access the content.
- A transcript can be especially useful for long or informative videos.
- It lists all spoken words and often also describes important visual cues.
- While not always strictly required if captions are available, it supports users who need plain text. (WCAG success criteria include media alternatives that create a text version of non-text content.)
5. Compliance with WCAG 2.1 Level AA
DOJ’s rule for state and local government web content says websites and their media must follow WCAG 2.1 Level AA, a widely accepted standard for web accessibility. That includes the audio and video criteria mentioned above.