Images, media and alternative text

Writing useful alt text, marking decorative images, complex figures, inline SVG accessibility, captions and transcripts, and controlling autoplaying media.

Alternative text that helps

<!-- decorative: empty alt, and it is skipped entirely -->
<img src="/divider.svg" alt="" />

<!-- informative: the meaning, not a description of the pixels -->
<img src="/chart-revenue.png"
     alt="Revenue grew from 40k in April to 85k in June, then fell to 70k in July"
     width="800" height="400" />

<!-- a complex image needs the data somewhere the user can actually read -->
<figure>
  <img src="/chart-revenue.png" alt="Monthly revenue, described in the table below" />
  <table>
    <caption>Monthly revenue, thousands of dollars</caption>
    <thead><tr><th scope="col">Month</th><th scope="col">Revenue</th></tr></thead>
    <tbody>
      <tr><th scope="row">April</th><td>40</td></tr>
      <tr><th scope="row">June</th><td>85</td></tr>
    </tbody>
  </table>
</figure>

• A missing alt attribute and alt="" are different things. The first makes a screen reader read the filename; the second makes it skip the image.
• Do not start with "image of" or "picture of" - the role is already announced.
• Keep it short. If the description runs to a paragraph, the information belongs in the surrounding text.
• A caption is visible to everyone and is not a substitute for alt text, but it can carry the long part of the description.

Inline SVG and icon fonts

<!-- decorative icon inside a labelled button -->
<button type="button">
  <svg aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-search" /></svg>
  Search
</button>

<!-- a meaningful standalone icon needs a name -->
<svg role="img" aria-labelledby="icon-warning-title" width="24" height="24">
  <title id="icon-warning-title">Warning</title>
  <path d="..." />
</svg>

<!-- icon font: the character is decorative, the text label carries the meaning -->
<a href="/cart">
  <span class="icon icon-cart" aria-hidden="true">&#xe900;</span>
  <span class="sr-only">Cart</span>
  <span aria-hidden="true">3</span>
  <span class="sr-only">, 3 items</span>
</a>

Prefer inline SVG with currentColor for icons. It inherits colour from CSS, scales without a raster artefact, and can be made decorative with a single attribute rather than a sprite workaround.

Video, audio and autoplay

<video controls preload="metadata" playsinline>
  <source src="/talk.mp4" type="video/mp4" />
  <track kind="captions" src="/talk.en.vtt" srclang="en" label="English" default />
  <track kind="chapters" src="/talk.chapters.vtt" srclang="en" label="Chapters" />
</video>

<details>
  <summary>Read the transcript</summary>
  <p>Full transcript text, with speaker changes marked and timestamps linking to the video.</p>
</details>

<!-- audio that autoplays must be stoppable and short -->
<audio controls src="/notice.mp3"></audio>

1. Provide captions for every video with speech. Auto-generated captions must be reviewed and corrected; unreviewed ones are frequently worse than none because they are confidently wrong.
2. Provide a transcript as well. It serves deafblind users, anyone searching the content, and anyone who cannot play audio in their environment.
3. Never autoplay audio. If content plays automatically for more than three seconds, there must be a visible pause or stop control.
4. Do not autoplay video with sound at all. It makes a page unusable for a screen reader user whose speech is drowned out.
5. Describe visual information that is not in the audio track - on-screen text, a demonstration, a chart - through audio description or an equivalent text version.
6. Remember the media controls themselves need to be keyboard reachable. Custom players frequently are not.

FAQ

Related

Colour, contrast and accessible visual design Data tables, charts and data visualisation

Last refreshed 2026-09-18.