Skip to main content

Images and media

Images, charts, and video carry meaning that visual readers absorb in a glance. Accessible alternatives -- alt, captions, transcripts -- carry that same meaning to anyone using assistive tech, anyone with images blocked, or anyone watching with the sound off. Back to the section overview.

Alternative text​

alt should convey the job of the image: what a sighted user learns from it. Decorative images use alt="" so assistive technologies skip them.

Do​

<img
    src="/img/quarterly-revenue.webp"
    alt="Bar chart: revenue grew from 2M to 3.4M between Q1 and Q4."
    width="640"
    height="360"
>

Don't​

<!-- Keyword stuffing and missing insight -->
<img src="/img/chart.webp" alt="chart graph money finance stock revenue money">

<!-- File name as alt -->
<img src="/img/IMG_02934.webp" alt="IMG_02934">

Do (decorative)​

<img src="/img/section-divider.svg" alt="" role="presentation">

Video and audio​

Avoid autoplay with sound. Provide captions for speech and a transcript when content is central.

Do​

<video controls preload="metadata">
    <source src="/media/product-tour.webm" type="video/webm">
    <track
        kind="captions"
        src="/media/product-tour-en.vtt"
        srclang="en"
        label="English"
        default
    >
</video>

Don't​

<video autoplay loop src="/media/promo.mp4"></video>