Brett Lindenberg
To create an image button on a web page, put an <img> inside a <button> element (for an action on the page) or inside an <a> link (to go to another page), and give the image alt text that says what the click does, such as "Download the safety checklist." The element makes the image work with a keyboard and a screen reader, and the alt text gives it a name. A video file cannot hold a link, so in a video you add the image as an interaction in an interactive video player and give it a click action.
Button or link: pick the element first
Choose the element by what the click does. The image only changes how it looks.
| What the click does | Element | Example |
|---|---|---|
| Goes to another page or file | <a href> | A logo that opens the home page, a thumbnail that opens a PDF |
| Does something on the current page | <button type="button"> | Opens a dialog, plays a video, shows a hidden panel |
| Sends a form | <input type="image"> or <button type="submit"> | A graphical "Search" or "Log in" button |
Avoid a <div> or a bare <img> with a click handler. Neither one gets keyboard focus or a button role unless you add them yourself, and the native elements include both.
How to make an image button in HTML
An image inside a button
<button type="button" class="image-button"> <img src="checklist.png" alt="Open the safety checklist" width="48" height="48">
</button>The alt text becomes the button's name, so a screen reader announces a button called "Open the safety checklist." Set type="button" every time. Inside a form, a button with no type submits the form, according to MDN's button reference. A button can hold images and text, but not other interactive elements such as links.
An image link
<a href="/files/safety-checklist.pdf" class="image-button"> <img src="checklist.png" alt="Download the safety checklist (PDF)" width="48" height="48">
</a>When the image is the only thing in the link, its alt text names the destination. The W3C images tutorial on functional images uses a logo link with alt="W3C home" as its example.
An icon next to visible text
<button type="button" class="image-button"> <img src="download.svg" alt="" width="24" height="24"> Download checklist
</button>When the button already has visible words, give the icon an empty alt="". Otherwise a screen reader reads the label twice. For an inline SVG icon, add aria-hidden="true" to the <svg> instead. MDN shows this pattern for an icon inside a button and warns never to put aria-hidden on the focusable element itself.
An icon-only SVG button
<button type="button" class="image-button"> <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24"> <path d="M8 5v14l11-7z" fill="currentColor"/> </svg> <span class="visually-hidden">Play the next lesson</span>
</button>A button that shows only an icon has no accessible name until you give it one. MDN recommends text inside the button, hidden visually with CSS if the design calls for an icon alone. The visually-hidden class is in the CSS below. Because the path uses fill="currentColor", the icon takes the button's text color, so the same icon code works in any color scheme.
A CSS background image
You can also set the picture with background-image on a plain text button. Background images have no alt text, so the words inside the button carry the name, and they still show if the image fails to load. Use this approach when the image is decoration behind a label. When the picture itself tells the viewer what the button does, use a real <img> with alt text.
Style the button with CSS
.image-button { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 44px; min-height: 44px; padding: 0.5rem; border: 2px solid #1d4ed8; border-radius: 8px; background: #ffffff; color: #1d4ed8; cursor: pointer;
}
.image-button img { display: block; }
.image-button:hover { background: #eff6ff; }
.image-button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}Most of these values come from WCAG 2.2:
- WCAG 2.2 success criterion 2.5.8 (level AA) asks for a target of at least 24 by 24 CSS pixels, with exceptions for spacing and inline links. The stricter level AAA criterion asks for 44 by 44, which is why the CSS above uses 44 pixels as the minimum for touch screens.
- Under WCAG 2.2 success criterion 1.4.11, the parts of a control that people need to see, including the focus indicator, need a contrast ratio of at least 3:1 against the colors next to them. An icon-only button with no visible text needs a border or background that meets 3:1 so people can tell it is a button.
- Success criterion 2.4.7 (level AA) requires a visible keyboard focus indicator, so keep the outline. The
:focus-visibleselector shows it for keyboard focus without showing a ring on every mouse click.
Which image format to use
| Format | Best for | Transparency | Note |
|---|---|---|---|
| SVG | Icons, logos, and line art | Yes | Vector, so it stays sharp at any size. You can recolor it with CSS. |
| PNG | Screenshots and icons with hard edges | Yes, full alpha | Lossless. Large files for photos. |
| WebP | Photos and graphics | Yes | Much better compression than PNG or JPEG. |
| JPEG | Photos | No | Lossy. Edges and text can blur. |
| GIF | Short, simple animation | One color only | MDN suggests WebP, AVIF, or APNG for animation instead. |
The MDN image file type guide has the full comparison. For any pixel format, export the file at twice the size it shows on screen. MDN's devicePixelRatio page explains that high-density displays use 2 or more physical pixels per CSS pixel, so a button shown at 48 by 48 pixels needs a 96 by 96 pixel image to stay sharp.
If an image button moves, keep the motion short. WCAG 2.2 success criterion 2.2.2 requires a way to pause, stop, or hide movement that starts on its own, lasts more than five seconds, and plays next to other content. An animated GIF that loops forever on a button falls under it.
Write alt text that names the action
The W3C tutorial on functional images says the text alternative should convey the action the image starts. Its examples are "print this page" rather than "printer" and "search" rather than "magnifying lens."
| Image on the button | Weak alt text | Alt text that names the action |
|---|---|---|
| Printer icon | Printer | Print this page |
| Magnifying glass | Magnifying glass | Search |
| Company logo that links home | Acme logo | Acme home |
| Thumbnail of the next lesson | Lesson 2 thumbnail | Play lesson 2: Lockout steps |
| PDF icon | Download the price list (PDF) |
Leave "image of" and "button" out of the alt text, because screen readers announce the element's role on their own.
How to add an image button to a video
A video file is a sequence of frames. You can burn a logo or an arrow into it with a video editor, and it will play everywhere, but no one can click it. To make an image clickable, you need a player that draws the image above the video and runs an action when someone clicks. In Mindstamp, the Image interaction does this on a video you already have:
- Open Interactions and move the playhead to the second where the image should appear.
- Select Image in the interaction bar. Upload a PNG, JPEG, GIF, or WebP file, pick one from your asset library, or paste the URL of an image.
- Drag the image into place on the video and resize it.
- Under Content, write a caption. Screen readers read the caption as the image's alt text, so write the action, as in the table above. If you leave it blank, a screen reader says only "Image."
- Choose the click action. The default, Continue, only records the click.
- Set the Show and Hide times under Timing, then select Save Image.
- Test the image in Preview and on a phone.
The full steps are in our help article on how to use clickable images on your videos. Because SVG is not on the upload list, export icons as PNG or WebP at twice their display size.
Click actions that suit an image
An image can run any of the more than 20 click actions. These fit images best:
- Open Link, for a product page or a document on your site. It pauses the video and opens the page in a new tab, unless you turn off Open links in new tab.
- Switch Video, so a thumbnail of the next scene or lesson branches to that video.
- Change Time, so a row of image tiles works as a chapter menu inside one video.
- Show Image, to open a larger diagram or map. The video pauses while the image is open.
- Download File, on Pro and higher plans.
- Add to Cart, if you connect a Shopify store.
Settings that change how the image behaves
- Post Click State decides what happens after a click: No Change, Hidden, or Disabled. Choose Hidden when the image is a one-time choice. (Change Colors works on buttons, not images.)
- Show Caption, under Styling, prints the caption on the video. Use it when the picture alone could mean two things.
- A transparent PNG still has a rectangular click area. Leave space between its corners and other interactions, and test clicks near the edges.
- Keep images off on-screen captions, faces, product demonstrations, and the player controls.
If the thing you want viewers to click is already in the footage, such as a product on a shelf, place a hotspot over it instead of adding a picture. A hotspot can also follow a moving object. For a side-by-side look at buttons, hotspots, images, and text, read what video buttons can do.
Use image buttons on the end screen
The Show Custom Screen end screen accepts images as well as buttons and text. For example, show two or three thumbnails of the next videos, each with Switch Video, so the viewer picks the next lesson by its picture. Our guide to custom end calls to action covers every end screen option and when to use each one.
Clickable images on other video platforms
| Platform | What you can add | When it appears | Limits |
|---|---|---|---|
| Mindstamp | Image interaction with any click action | Any time you set, and on the end screen | Each click is recorded with the viewer and the time |
| Wistia | Image call to action that opens a link | At any timestamp | Viewers can always skip it (Wistia help) |
| Vimeo | Custom image end screen, optionally a link | After the video ends | Paid plans. Shows on embeds and on unlisted or password-protected videos (Vimeo help) |
| YouTube | End screen elements (video, playlist, subscribe, channel, link) and cards | End screen: last 5 to 20 seconds | Links to your own site need YouTube Partner Program membership (YouTube help) |
For step-by-step instructions on each platform, see how to add call-to-action buttons to your videos.
Test the image button before you publish
- Use only the keyboard. Press Tab to reach the button and Enter (or Space, for a button) to use it. Check that you can see where the focus is.
- Listen to it with a screen reader. The name you hear should describe the action. A file name or the word "image" means the alt text is missing.
- Break the image path on purpose. The alt text should still tell people what the control does.
- Tap it on a phone, near the edges as well as the center.
In Mindstamp, play the video with only Tab, Enter, and Space to confirm you can reach and use every image, button, and hotspot. Our accessibility features page lists what the player supports, and the free video accessibility checker walks through the WCAG checks for the rest of the video.
Common questions
How do I make part of an image clickable?
On a web page, an image map does this: a <map> with one <area> per clickable region. Each area that has an href needs its own alt text (MDN). The coordinates are fixed CSS pixels, so the regions drift when the image scales to fit a phone. For a few regions, links positioned over the image with percentages hold up better. In a video, use one hotspot per region.
Why does my image button look blurry?
The image file has fewer pixels than the screen draws. Export it at twice the display size, or use SVG for icons.
Can I use HTML to build a button inside a video?
Mindstamp text interactions accept some HTML, and buttons are a separate interaction type with their own styling. The post on how to use HTML in your interactive videos lists which tags work.
Do image buttons in Mindstamp work with screen readers?
The player uses each image's caption as its alt text, and images with a click action can be reached with the keyboard. Mindstamp does not publish a WCAG conformance level or a VPAT, so test your own videos with the steps above.
Sources and further reading
- Idomoo, 2025 video marketing statistics and consumer trends: results of a 2025 survey of 2,510 adults in the US and UK, which Idomoo commissioned from Atomik Research, on interest in interactive and personalized video.
