Images and Media

Visual and audio content — images, videos, audio, and data visualizations — are among the richest elements of the web. They are also among the most common accessibility barriers. This page covers how to make each type of media accessible: what information needs a text equivalent, how to write it well, and how to implement it correctly.

Images and alt text

Author

Every <img> element must have an alt attribute. The content of that attribute depends on the role the image plays in the content.

The four image types

Image type	Description	Alt text approach
Informative	Conveys information not in surrounding text	Describe the content and meaning concisely
Decorative	Adds visual interest; content is conveyed by surrounding text	Empty alt="" — screen readers skip it
Functional	An image that acts as a link or button	Describe the destination or action, not the image
Complex	Chart, graph, map, or diagram with detailed data	Brief alt text + long description (caption, table, or linked text)

Informative images

Write alt text that conveys the same meaning the image provides to sighted users. You are not describing the image’s pixels — you are communicating its content.

Key questions:

• What information does this image convey that a sighted reader would use?
• What would be missing if this image were not shown?

<!-- Bad: describes appearance, not meaning -->
<img src="team-meeting.jpg" alt="People sitting around a table">

<!-- Good: communicates the meaning -->
<img src="team-meeting.jpg" alt="The CanAccess team reviewing accessibility audit results">

<!-- Bad: too vague -->
<img src="chart.png" alt="Chart">

<!-- Good: communicates the key insight -->
<img src="chart.png" alt="Bar chart showing AODA compliance rates: 72% of large organizations vs 34% of small organizations comply with WCAG 2.0 AA">

Alt text should not:

• Begin with “image of”, “photo of”, or “picture of” — screen readers already announce “image”
• Repeat adjacent text verbatim
• Be excessively long (aim for under 125 characters for informative images; use long descriptions for complex ones)
• Include phrases like “click here to see” — alt text describes the image, not user actions

Decorative images

Decorative images add visual appeal but do not add information. If the image were removed, no content would be lost.

<!-- Decorative: icon that duplicates adjacent text label -->
<button>
  <img src="search-icon.svg" alt="" role="presentation">
  Search
</button>

<!-- Decorative: background divider pattern -->
<img src="wave-divider.svg" alt="" role="presentation">

<!-- Decorative: stock photo illustrating a page section -->
<img src="diverse-team.jpg" alt="">

Functional images (linked or button images)

When an image is inside a link or button, the alt text must describe the destination or action — not the image:

<!-- Image link to a page -->
<a href="/accessible-canada-act">
  <img src="aca-logo.png" alt="Accessible Canada Act — official page">
</a>

<!-- Icon button -->
<button>
  <img src="close-icon.svg" alt="Close dialog">
</button>

<!-- Logo link to home page (common pattern) -->
<a href="/">
  <img src="logo.svg" alt="CanAccess — return to home page">
</a>

Note: if a linked image has adjacent link text that already describes the destination, the image can be marked as decorative (alt=""):

<a href="/accessible-canada-act">
  <img src="aca-icon.png" alt="">
  Accessible Canada Act
</a>

Complex images

Complex images — charts, graphs, maps, diagrams, flow charts — contain detailed information that cannot be conveyed in a brief alt text. They require a long description in addition to alt text.

Approach 1: Caption as long description

For charts and graphs, a table below the image is often the best long description. It makes the underlying data accessible and useful for all users.

<figure>
  <img
    src="wcag-adoption-chart.png"
    alt="Bar chart: WCAG adoption rates by province, 2023"
    aria-describedby="wcag-chart-description"
  >
  <figcaption id="wcag-chart-description">
    WCAG adoption rates by province (2023): Ontario 68%, BC 61%,
    Quebec 55%, Alberta 52%, remaining provinces under 40%.
    Source: Accessibility Canada Annual Report 2023.
  </figcaption>
</figure>

Approach 2: Adjacent data table

For quantitative charts, provide the full dataset as an HTML table near the image. This is the most useful format for data consumers:

<figure>
  <img src="compliance-rates.png" alt="See compliance rates table below">
  <figcaption>AODA Compliance Rates by Organization Size, 2023</figcaption>
</figure>

<table>
  <caption>AODA Compliance Rates by Organization Size, 2023</caption>
  <thead>
    <tr>
      <th scope="col">Organization size</th>
      <th scope="col">Full compliance</th>
      <th scope="col">Partial compliance</th>
      <th scope="col">Non-compliant</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Large (500+ employees)</th>
      <td>72%</td>
      <td>21%</td>
      <td>7%</td>
    </tr>
    <tr>
      <th scope="row">Small (1–20 employees)</th>
      <td>34%</td>
      <td>38%</td>
      <td>28%</td>
    </tr>
  </tbody>
</table>

Approach 3: aria-describedby + hidden description

When a visible description is not appropriate, a hidden long description can be provided:

<img
  src="org-chart.png"
  alt="Organization chart for the CanAccess team"
  aria-describedby="org-chart-desc"
>
<div id="org-chart-desc" class="sr-only">
  The chart shows three levels: Executive Director at top;
  three managers (Design, Development, Content) reporting to them;
  two staff members under each manager.
</div>

Images of text

Images that contain text (screenshots, infographics with text, banners with typed text) must have alt text that includes all the text in the image (WCAG 1.4.5, Level AA). Better: use real HTML text instead of images of text wherever possible.

<!-- Bad: text in image, no alt -->
<img src="contact-info.png">

<!-- Acceptable: all text in alt -->
<img src="contact-info.png" alt="Contact us: phone 1-800-555-0100, email hello@example.ca, hours Mon–Fri 9am–5pm EST">

<!-- Best: use HTML text instead -->
<address>
  <p>Phone: <a href="tel:18005550100">1-800-555-0100</a></p>
  <p>Email: <a href="mailto:hello@example.ca">hello@example.ca</a></p>
  <p>Hours: Monday–Friday, 9am–5pm EST</p>
</address>

Captions

Author

Captions are synchronized text equivalents for the audio content of video. They serve users who are Deaf, hard of hearing, watching in a sound-restricted environment, or whose hearing aids amplify background noise.

Caption requirements (WCAG)

Criterion	Level	Requirement
1.2.2 Captions (Prerecorded)	AA	All pre-recorded video with audio must have synchronized captions
1.2.4 Captions (Live)	AA	Live video with audio must have real-time captions

What captions must include

Captions are not just a transcript of speech. High-quality captions include:

• All spoken dialogue, verbatim (not paraphrased)
• Speaker identification when multiple speakers are present: [Host]:, [Sarah]:, or [Interviewer]:
• Relevant non-speech audio: [upbeat music], [door slams], [audience applause], [notification sound]
• On-screen text or titles that are part of the content
• Tone or manner indicators when communicating meaning: [whispering], [sarcastically] — use sparingly and only when the tone itself is informative

Captions are NOT:

• Subtitles (which translate spoken content but omit non-speech audio)
• A partial transcript
• Auto-generated captions that have not been reviewed — these frequently contain errors that change meaning

Auto-generated captions

Automatic captions from YouTube, Teams, Zoom, and similar platforms are a starting point, not a finished product. Common auto-caption failures:

• Mishearing technical terms, proper nouns, and acronyms (critical in professional content)
• No punctuation or inconsistent punctuation
• Missing speaker identification
• Omitting non-speech sounds

Review and correct all auto-generated captions before publishing. The CRTC requires 95% accuracy for broadcast captions; the same standard is a reasonable target for professional web content.

Caption accuracy test

Before publishing captioned video:

1. Watch the video with audio completely off — can you follow all content from captions alone?
2. Are all speakers identified when there are multiple voices?
3. Are relevant non-speech sounds described?
4. Is punctuation present and correct?
5. Do captions sync within 2 seconds of speech?

Implementing captions in HTML

<video controls>
  <source src="training-video.mp4" type="video/mp4">
  <!-- English captions (default) -->
  <track
    kind="captions"
    src="training-video.en.vtt"
    srclang="en"
    label="English"
    default
  >
  <!-- French captions -->
  <track
    kind="captions"
    src="training-video.fr.vtt"
    srclang="fr"
    label="Français"
  >
</video>

Caption file format (WebVTT):

WEBVTT

00:00:03.500 --> 00:00:07.200
[Host]: Welcome to the AODA compliance training series.

00:00:07.200 --> 00:00:11.000
In this module, we'll cover the Integrated Accessibility Standards.

00:00:11.000 --> 00:00:14.500
[upbeat intro music fades]

00:00:15.000 --> 00:00:19.300
[Host]: Section 14 of the IASR requires all organizations
with 50 or more employees to...

Transcripts

Author

Transcripts are complete text versions of audio or video content. They differ from captions in that they are not synchronized — users read at their own pace.

When transcripts are required

Content type	WCAG requirement	Level
Audio-only (podcasts, audio recordings)	Text transcript	A (1.2.1)
Video-only (silent video)	Text or audio description	A (1.2.1)
Pre-recorded audio-video	Captions + audio description. Transcript is not required but strongly recommended	AA

What transcripts must include

A transcript should be a complete read-equivalent of the media. For video, this means:

• All spoken dialogue (verbatim, with speaker identification)
• Description of important visual content not conveyed by speech: “The presenter points to a chart showing…” or “The screen shows the AODA login page”
• Non-speech sounds when meaningful: [music plays], [applause]
• On-screen text

Transcript placement

• Place the transcript directly below or near the media player
• Do not require a separate page visit to access the transcript (unless it is very long — in which case, provide a summary inline and link to the full transcript)
• Mark up the transcript as structured HTML — use heading tags, paragraph tags, and speaker labels in bold or strong

<figure>
  <video controls>
    <source src="accessibility-overview.mp4" type="video/mp4">
    <track kind="captions" src="accessibility-overview.en.vtt" srclang="en" default>
  </video>
  <figcaption>
    Accessibility Overview (12 min) — <a href="/transcripts/accessibility-overview">View full transcript</a>
  </figcaption>
</figure>

<!-- Or: inline collapsible transcript -->
<details>
  <summary>Read the transcript</summary>
  <div class="transcript">
    <p><strong>[Host]:</strong> Welcome. In this video, we'll cover the four principles of accessible design...</p>
    <p><strong>[00:00:45]</strong> The first principle is Perceivable...</p>
    <!-- full transcript -->
  </div>
</details>

Transcript formatting

• Use <strong> or a colon-delimited label for speaker names: [Host]: or **Sarah:**
• Add timestamps at natural intervals (every 30–60 seconds) to help users cross-reference with the video
• Use headings to divide long transcripts by topic — this makes them navigable and searchable
• Do not transcribe word-for-word filler (“um”, “uh”) unless it is meaningful — a lightly edited transcript is more useful

Audio descriptions

Author Developer

Audio descriptions (also called video descriptions or described video) add narration to the audio track of a video, describing visual information not conveyed in the existing audio. They serve:

• Users who are blind or have low vision
• Users who are both Deaf and blind (via audio description + transcript)

When audio descriptions are required

Criterion	Level	Requirement
1.2.3 Audio Description or Media Alternative	A	Pre-recorded video must have audio description OR a full text alternative
1.2.5 Audio Description (Prerecorded)	AA	Pre-recorded synchronized video must have audio description

Exception: If the existing audio fully describes all visual content, audio description is not needed — but document this decision.

What audio descriptions cover

Audio description narrates visual information during pauses in dialogue:

• On-screen text that is not read aloud (“The screen shows a form labelled ‘Service Request’”)
• Actions and gestures not described in dialogue (“The presenter navigates to the Accessibility menu”)
• Changes in setting or scene (“The view changes to a live demo of the NVDA screen reader”)
• Important non-verbal communication when it conveys meaning

Extended audio description

When there are insufficient pauses for audio description, extended audio description involves pausing the video to allow narration. This is required at WCAG 1.2.7 (Level AAA).

For practical content creation, the simplest approach is to script the video with accessibility in mind from the beginning: have speakers describe what they are doing on screen, avoid “as you can see here” references without narration, and read out any text that appears on screen.

Implementing audio descriptions

Option 1: Described video track (preferred for broadcast/professional)

A separate audio track provides descriptions during pauses. The user selects it via a “Described Video” option in the player.

Option 2: Two versions

Provide two versions of the video: the standard version and an audio-described version with narration overlaid. Link clearly: “Watch described version.”

Option 3: Text description

A written description of all visual content, provided as a visible text alternative below the video. This satisfies WCAG 1.2.3 at Level A.

<figure>
  <video controls>
    <source src="demo-video.mp4" type="video/mp4">
    <source src="demo-video-described.mp4" type="video/mp4"
      id="described-version">
    <track kind="captions" src="demo-video.vtt" srclang="en" default>
  </video>
  <p>
    <a href="/demo-video-described.mp4">Watch with audio description</a>
  </p>
</figure>

Background images

Background images (set in CSS) cannot have alt text. Use CSS background images only for decorative purposes. All informative images must be in HTML <img> elements.

/* Acceptable: purely decorative background */
.hero {
  background-image: url('decorative-wave.svg');
}

/* Not acceptable: content image in CSS */
.certificate {
  /* Cannot add alt text — if this image conveys information, use <img> */
  background-image: url('certificate-seal.png');
}

SVG accessibility

Inline SVGs are increasingly common for icons, logos, and data visualizations. They require specific accessibility treatment:

<!-- Informative inline SVG -->
<svg role="img" aria-labelledby="chart-title chart-desc" width="400" height="300">
  <title id="chart-title">WCAG Compliance by Sector</title>
  <desc id="chart-desc">
    Government sector leads at 78%; private sector at 52%; non-profit at 45%.
  </desc>
  <!-- SVG content -->
</svg>

<!-- Decorative inline SVG -->
<svg aria-hidden="true" focusable="false" width="24" height="24">
  <!-- decorative icon paths -->
</svg>

Note: focusable="false" is required in Internet Explorer and older Edge to prevent SVGs from receiving focus in the Tab sequence.

Animated GIFs and auto-playing media

Animated GIFs and auto-playing video are common accessibility risks:

• Flashing: content that flashes more than 3 times per second may trigger photosensitive seizures (WCAG 2.3.1, Level A)
• Motion: animated GIFs and auto-playing video should be stoppable or respect prefers-reduced-motion
• Audio: never autoplay audio; provide controls (WCAG 1.4.2, Level A)

<!-- Video: provide controls, no autoplay with audio -->
<video controls>
  <source src="product-demo.mp4" type="video/mp4">
  <track kind="captions" src="product-demo.vtt" srclang="en" default>
</video>

<!-- If autoplay is needed: mute, no loop (or provide pause) -->
<video autoplay muted playsinline loop aria-label="Decorative background animation">
  <source src="background-loop.mp4" type="video/mp4">
</video>

Media checklist

Images

• Every <img> has an alt attribute (even if empty for decorative)
• Informative images have descriptive alt text conveying the image’s meaning
• Decorative images have alt=""
• Functional images (linked/button images) describe the destination or action
• Complex images have a long description (caption, table, or hidden text)
• Images of text include all the text in alt

Video

• All pre-recorded video with audio has synchronized captions
• Captions include speech, non-speech audio, and speaker identification
• Auto-generated captions have been reviewed and corrected
• Pre-recorded video has audio description (or full text alternative)
• Video does not autoplay with audio

Audio

• All audio-only content has a text transcript
• Transcripts are structured HTML, placed near the media
• Audio does not autoplay

Animated content

• No content flashes more than 3 times per second
• Animations respect prefers-reduced-motion
• Auto-advancing content (carousels, slideshows) has a pause control

Related pages

• Hearing Disabilities — detailed guidance on captions, transcripts, and relay services
• Vision Disabilities — alt text and audio description needs for screen reader users
• Plain Language Writing — writing effective alt text and descriptions
• Design Principles — colour, contrast, and motion for visual media
• Development Practices — implementing accessible media in HTML and JavaScript