Image and video accessibility comes down to one rule: if meaning lives in a picture, a chart, a GIF, or a scene, that meaning also has to exist as text or narration. For images that means alt text written for the image's job, with alt="" on purely decorative images. For video it means captions for speech and meaningful sound, audio description when the visuals carry information the audio doesn't, and a transcript as a fallback.
This guide maps each of those to the WCAG 2.1 success criteria behind it, gives a checklist you can run before publishing, and covers the cases most teams get wrong: images of text, charts, GIFs, screenshots, and social graphics.
Quick checklist: accessible images and videos
- Every meaningful image has alt text that says what the image adds or does, not what it looks like.
- Decorative images use
alt=""(or are CSS backgrounds) so screen readers skip them. - Linked or button images describe the action, such as "Download the pricing PDF".
- Charts and infographics have a full text equivalent nearby, not just a one-line label.
- Images of text are replaced with real HTML text wherever possible, and otherwise carry the exact words in the alt text.
- Prerecorded video with speech has edited captions that identify speakers and include meaningful sounds.
- Video where visuals carry meaning has audio description, or the narration covers what happens on screen.
- Audio-only and video-only content has a transcript or text alternative.
- GIFs and autoplay motion longer than five seconds can be paused, stopped, or hidden.
- Nothing flashes more than three times in any one second.
The WCAG criteria that apply to images and video
WCAG 2.1 Level AA is the benchmark the ADA Title II web rule adopts, with deadlines of 26 April 2027 for larger state and local governments and 26 April 2028 for smaller ones and special districts. These are the success criteria that cover visual and time-based media:
| Criterion | Level | What it asks for |
|---|---|---|
| 1.1.1 Non-text Content | A | A text alternative for every image and non-text element that serves the same purpose. Decorative images are marked so assistive technology ignores them. |
| 1.2.1 Audio-only and Video-only (Prerecorded) | A | A transcript for audio-only content, and a text or audio alternative for silent video. |
| 1.2.2 Captions (Prerecorded) | A | Captions for all prerecorded audio in synchronized media. |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) | A | Audio description or a full text alternative for prerecorded video. |
| 1.2.4 Captions (Live) | AA | Captions for live audio in synchronized media, such as webinars and live streams. |
| 1.2.5 Audio Description (Prerecorded) | AA | Audio description for prerecorded video. At AA, a text transcript alone no longer covers it. |
| 1.4.5 Images of Text | AA | Use real text instead of text baked into images, except for logos and cases where the presentation is essential. |
| 2.2.2 Pause, Stop, Hide | A | Moving content that starts automatically and lasts more than five seconds can be paused, stopped, or hidden. |
| 2.3.1 Three Flashes or Below Threshold | A | No content flashes more than three times in any one-second period. |
The W3C's Understanding WCAG 2.1 pages explain each criterion in detail. If you work under Section 508 or AODA, the same media criteria exist in WCAG 2.0 AA, which those rules reference.
Image accessibility by image type
The W3C WAI images tutorial sorts images by what they do: informative, decorative, functional, images of text, complex, groups, and image maps. The type decides the alt text. A useful test is to ask what someone would miss if the image disappeared, then write that.
Informative images
Describe the information the image adds. A product photo on a sales page might need "Navy wool coat with a hood and two front pockets". The same photo used as a mood shot beside a heading that already says all that might need much less.
Decorative images
Dividers, background textures, and stock photos that add no meaning get an empty alt attribute: alt="". Leaving the attribute off entirely is not the same thing. Many screen readers will then read the file name, which is worse than silence.
Functional images
When an image is a link or a button, the alt text names the action or destination. A magnifying glass icon in a search button is "Search", not "magnifying glass". A logo linking home is usually "WebAbility.io home".
Complex images: charts, diagrams, infographics
A short alt text can't carry a bar chart. Give the chart a brief alt that names it and its main takeaway, then put the full data or explanation in nearby text, a data table, or a linked long description. "Sales chart" in the alt field leaves a screen reader user with nothing.
Images of text
Text baked into an image can't be resized cleanly, restyled, translated, or read reliably by assistive technology. WCAG 1.4.5 asks you to use real text instead wherever you can. When an image of text has to stay, such as a logo or a screenshot of an error message, the alt text should carry the same words the image shows.
| Asset | What to do |
|---|---|
| Promo graphic with a headline | Move the headline into HTML. If it must stay in the image, repeat it word for word in the alt text. |
| Screenshot of an error message | Quote the visible error text exactly. |
| Banner with call-to-action text | Use the CTA wording itself, not a paraphrase. |
| Text-heavy social card | Redesign so the words live in the post text, and keep the image light. |
For a writing process you can hand to content teams, see our alt text best practices.
Video accessibility: captions, audio description, transcripts
Video accessibility has three separate jobs, and teams often assume captions cover all three. They don't.
Captions
Captions put spoken words and meaningful sounds on screen in sync with the video. Good captions identify speakers when it isn't obvious who is talking, include sound cues that matter such as [phone rings] or [crowd cheering], and stay on screen long enough to read. WCAG doesn't set an accuracy percentage, but captions that mangle product names or skip lines don't give the same information as the audio, so treat auto-generated captions as a first draft and edit them before you publish.
Closed captions are usually delivered as a separate file, such as WebVTT or SRT, that viewers can turn on and off. Open captions are burned into the picture, which works on platforms that don't support caption files but can't be restyled by the viewer.
Audio description
Audio description narrates important visual information that the soundtrack doesn't already convey. You need it when a viewer listening without seeing would miss something, for example:
- A pricing slide, title card, or legal disclaimer that appears without being read aloud.
- A software demo where the presenter clicks through steps without saying what they are doing.
- A facial expression or gesture that changes the meaning of a scene.
The cheapest audio description is the one you never have to add. If the script says "click Settings, then Billing" while the screen shows it, the visuals are already described. Planning narration this way at the script stage is much easier than fitting a description track into pauses later, a point the National Disability Authority's Centre for Excellence in Universal Design also makes.
Transcripts
A transcript is the full text of a video or audio file, including speech, relevant sounds, and, ideally, descriptions of key visuals. It is required for audio-only content such as podcasts under 1.2.1, and it helps everyone else too: people can search it, skim it, and read it on a slow connection.
Do videos need alt text?
Not in the way images do. The alt attribute belongs to images, not the <video> element. A video's text alternatives are its captions, audio description, and transcript. Give the player an accessible name, such as a visible title or an aria-label, so screen reader users know what the video is before they press play, and make sure the player controls work with a keyboard.
GIFs, social media, and other edge cases
Real content mixes text, motion, and emotion in one asset, and that is where simple rules run out. The Section508.gov social media guidance covers alt text, captions, and contrast for posts. A few cases need extra judgment:
- GIFs: If the loop carries meaning, describe the action or message. If it has text, include the text. If it plays for more than five seconds, give users a way to pause it.
- Memes: Capture both the visible text and the intended meaning. A literal description can miss the joke entirely.
- Screenshots in help content: Describe the state or step the user needs, not just "dashboard screenshot".
- Branded social tiles: Text overlays need enough contrast, and the wording should also appear in the post text.
Sometimes the accessible answer isn't better alt text but a better asset. A tile packed with small, low-contrast copy can technically have a text alternative and still be hard for people with low vision or color blindness to use. Redesigning it often does more than patching it after the fact.
A workflow that catches problems before they ship
Most media accessibility problems start before anything reaches the CMS, at the point where a team decides where the meaning will live. Building checks into each stage is far cheaper than fixing assets after launch.
- Script and storyboard: Flag information that appears only on screen or only in audio, and narrate key visuals where you can.
- Design: Keep essential text out of images unless there is a plan for it.
- Post-production: Edit captions, write the transcript, and add audio description where visuals carry meaning.
- Pre-publish QA: Check alt text, test the video player with a keyboard and a screen reader, and confirm captions can be turned on.
- After publish: Scan regularly for images missing alt text and videos without captions, since new uploads keep arriving.
Automated tools are good at the repeatable part: finding images with no alt attribute, empty link images, and media without caption tracks. They can't judge whether alt text is accurate or whether a scene needs description, so pair them with human review. Our screen reader testing guide covers the manual side.
Why this matters beyond legal risk
Media often carries the main message on a page: the product demo, the chart that makes the case, the CTA banner. If a visitor can't get that message, the page has failed for them, whatever the reason. Captions also help people watching with the sound off, and transcripts give search engines and readers text to work with. For the wider argument, see the business case for accessibility.
Find the images and videos that need fixing
Start with the pages that matter most: your homepage, product and pricing pages, and anything with embedded video. Run them through the WebAbility website accessibility checker to find images missing alt text and other WCAG issues, then fix the assets that influence sales and support first. If you need a full review against WCAG 2.1 AA, including the judgment calls automation can't make, a manual accessibility audit covers it.
