Media and Animation

---

​

Overview

Directly Related WCAG Guidelines(s):

• 1.1.1 Non-text Content (Level A)
• 1.2.1 Audio-only and Video-only (Prerecorded) (Level A)
• 1.2.2 Captions (Prerecorded) (Level A)
• 1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)
• 1.4.2 Audio Control (Level A)
• 2.2.2 Pause, Stop, Hide (Level A)
• 2.3.1 Three Flashes or Below Threshold (Level A)
• 2.3.3 Animation from Interactions (Level AAA)

Media and animation elements can create significant barriers for users with disabilities if not properly implemented. Screen readers and assistive technologies rely on alternative formats to interpret visual and auditory content, while all users benefit from accessible media that respects their preferences and needs. Proper accessibility implementation ensures that all users can access the same information regardless of how it’s presented. This includes providing alternative formats for media content, ensuring that animations respect user preferences, and implementing proper controls for time-based content. Without proper media accessibility, users may miss critical information, experience motion sickness, or fail to interact with content that relies solely on visual or auditory cues.

---

​

Alt Tags vs Decorative Images

Directly Related WCAG Guidelines(s):

• 1.1.1 Non-text Content (Level A)
• 1.4.1 Use of Color (Level A)
• 1.4.3 Contrast (Minimum) (Level AA)
• 1.4.5 Images of Text (Level AA)

Image accessibility ensures that all users can understand visual content and navigate interfaces effectively. Screen readers rely on alt text to announce the purpose and content of images, while visual users need clear descriptions to understand what images represent. Proper image accessibility implementation ensures that visual content is programmatically determinable and provides appropriate context for all users. This includes providing descriptive text for informative images and properly handling decorative images that don’t convey essential information. Without proper image accessibility, users may miss critical information, become confused about interface elements, or fail to understand the context of visual content.

​

Best Practices

• Write concise, relevant alt text for informative images using as few words as possible to convey meaning
• Use empty alt attributes (alt="") for purely decorative images so screen readers skip them
• Describe the purpose or content of an image, not its appearance

​

Common Pitfalls

• Writing vague or overly elaborate alt descriptions that overwhelm users
• Adding alt text to decorative images that should be ignored by assistive technologies
• Describing visual details instead of conveying the image’s purpose or message

---

​

Timing and Motion Adjustments

Directly Related WCAG Guidelines(s):

• 2.2.1 Timing Adjustable (Level A)
• 2.2.2 Pause, Stop, Hide (Level A)
• 2.3.1 Three Flashes or Below Threshold (Level A)
• 2.3.3 Animation from Interactions (Level AAA)

Some users need more time to read content, complete forms, or respond to time-sensitive interactions. Screen readers and assistive technologies rely on proper timing controls to ensure users can complete tasks successfully, while all users benefit from motion preferences that respect their comfort and accessibility needs. Proper timing and motion implementation ensures that users can control the pace of interactions and that content respects their preferences. This includes providing options to extend, pause, or disable time limits and ensuring that animations don’t create barriers for users with vestibular disorders. Without proper timing and motion controls, users may become frustrated by time constraints, experience motion sickness, or fail to complete tasks that move too quickly.

​

Best Practices

• Respect user motion preferences set at the system level (prefers-reduced-motion)
• Provide controls to pause, extend, or disable time limits on content
• Give clear feedback about timing constraints with options to adjust them

​

Common Pitfalls

• Ignoring user preferences by forcing animations or auto-advancing content
• Failing to inform users about timing constraints before they expire
• Automatically hiding components that contain interactive elements or important information

---

​

Video/Audio and Interactive Controls

Directly Related WCAG Guidelines(s):

• 1.2.1 Audio-only and Video-only (Prerecorded) (Level A)
• 1.2.2 Captions (Prerecorded) (Level A)
• 1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)
• 1.2.4 Captions (Live) (Level AA)
• 1.2.5 Audio Description (Preredcorded) (Level AA)
• 1.4.2 Audio Control (Prerecorded) (Level A)
• 2.1.1 Keyboard (Level A)
• 2.1.2 No Keyboard Trap (Level A)
• 4.1.2 Name, Role, Value (Level A)

Video and audio content must be accessible to users who are deaf, hard of hearing, or have visual impairments. Screen readers and assistive technologies rely on captions, transcripts, and audio descriptions to communicate media content, while all users need proper controls to manage playback and interaction. Proper media accessibility implementation ensures that all users can access the same information regardless of their abilities. This includes providing alternative formats for media content, implementing proper keyboard navigation for media controls, and ensuring that media doesn’t autoplay without user consent. Without proper media accessibility, users may miss important information, become frustrated by inaccessible content, or fail to control media playback effectively.

​

Best Practices

• Provide accessible media controls with proper keyboard navigation
• Include captions for videos and transcripts for audio content
• Avoid autoplay, but if required, always provide visible pause/stop controls

​

Common Pitfalls

• Omitting alternative formats like captions or transcripts
• Missing essential media controls (play, pause, volume, etc.)
• Autoplaying media without providing accessible controls to stop it