Reviewed by Misha Gavura, founder of Inclusely. Last reviewed . Written by the Inclusely team at EVDEV, Toronto.
The short answer
Alt text (alternative text) is a short written description of an image, stored in the image's alt attribute. Screen readers read it aloud for people who cannot see the image, and browsers show it when the image fails to load. It should say what the image tells the reader, in one plain sentence, or be left empty when the image is only decoration.
Looking for what to write? See our alt text examples for product images. This page explains what alt text is and how it works.
What alt text means
Every image on a web page is placed with an img tag. That tag can carry an alt attribute, a short piece of text that stands in for the picture. The word alt is short for alternative: the text is an alternative to the image for anyone who cannot see it.
Here is what it looks like in the page code:
<!-- An image with alt text -->
<img src="linen-shirt-sage.jpg"
alt="Oversized linen shirt in sage green, worn with rolled sleeves">
<!-- A decorative image: empty alt, so screen readers skip it -->
<img src="paper-texture.png" alt="">
<!-- No alt at all: avoid. Many screen readers read the file name -->
<img src="IMG_4521.jpg">Shoppers never see the code. They see the photo. A blind shopper using a screen reader hears the alt text instead, for example “Oversized linen shirt in sage green, worn with rolled sleeves, image”. The screen reader already says it is an image (VoiceOver says “image”, NVDA says “graphic”), which is why alt text should not start with “image of”.
The HTML standard says images must have an alt attribute, apart from a few narrow cases, and that “lack of effort” is not an acceptable reason to leave it out. It is still one of the most common problems on the web. In WebAIM's February 2026 scan of one million home pages, 53.1% had at least one image with no alt text.
Alt text, alt tag, alt attribute: is there a difference?
No. People use four names for the same thing. The technically correct one is alt attribute, because alt is an attribute inside the img tag, not a tag of its own. Alt tag is a common shortcut, and you will see it in SEO tools and in some Shopify apps.
| Name | What it refers to |
|---|---|
| Alt text | The words you write. The most common name. |
| Alternative text | The full name, used in WCAG and the HTML standard. |
| Alt attribute | The alt="..." part of the img tag that holds the words. |
| Alt tag | An informal name for the alt attribute. There is no separate alt tag in HTML. |
Who uses alt text, and what for
- People who are blind or have low vision. Screen readers such as VoiceOver (built into Mac and iPhone) and NVDA (free for Windows) read the alt text aloud. Braille displays show it.
- People on slow or broken connections. When an image does not load, the browser shows the alt text in its place.
- People who turn images off to save data, or who use text-only browsers.
- Search engines. Google says it uses alt text, with the text around the image, to work out what the image shows.
The first group is the reason alt text exists. WCAG success criterion 1.1.1, Non-text content, asks for a text alternative for every image that carries meaning, and it is level A, the most basic level.
Alt text vs caption vs title vs image description
These four get mixed up all the time, and Shopify themes and apps sometimes use the words loosely. Here is how they differ.
Alt text and a caption work together. The HTML standard is direct about it: never put the image's caption in the alt attribute. Use the caption for context and the alt text for what the picture shows.
<figure>
<img src="founders.jpg"
alt="Two women packing orders at a long wooden table">
<figcaption>Ana and Mei started the shop from their garage in 2019.</figcaption>
</figure>The title attribute is not a backup for alt text. Some apps and older themes add a title to images. It only shows when a mouse hovers, phones and keyboards do not bring it up, and screen readers handle it in different ways. Leave it out unless you have a reason.
An image description is for detail. A size chart saved as an image cannot fit in one sentence of alt text. Put the measurements on the page as a real table, and keep the alt text short, such as “Size chart. The same measurements are in the table below.” The W3C tutorial on complex images describes this two-part approach.
aria-label is something else again. It names a button, link or other control that has no text, such as a cart icon. On an image, the native alt attribute comes first. Our aria-label guide for Shopify themes covers when each one applies.
Decorative images: when alt text should be empty
Some images add nothing a reader needs. The W3C calls them decorative: borders and other page styling, images used only for mood, and images whose meaning is already in the text next to them. These images should have empty alt text, written alt="", so the screen reader skips them.
Empty and missing are not the same. Empty alt text is a clear signal: skip this. A missing alt attribute leaves the screen reader to guess, and many read the file name, so a shopper hears something like “hero underscore final underscore 2 dot jpg”.
Deciding is a judgment call, not a rule a tool can make for you. A useful test: if you removed the image, would a shopper miss any information? If not, it is decorative.
What good alt text does
Good alt text passes on what the image means in its place on the page. In practice that means it:
- says what matters in this photo, not everything in it
- is usually one sentence, often shorter
- skips “image of” and “photo of”, because the screen reader says that already
- repeats any words that are part of the image, such as a sale banner's offer
- describes what a linked image does, such as “Instagram”, rather than “Instagram logo icon”
- is written for a person, not packed with search keywords
The same photo can need different alt text in different places. A photo of a ceramic mug on a product page should mention the glaze and size. The same photo on a blog post about your studio might only need “Mugs drying on a shelf before firing”. Context decides.
For weak and better versions of real store photos (clothes, jewellery, food, banners and icons), see the alt text examples guide.
Is alt text required?
Alt text comes from WCAG success criterion 1.1.1, Non-text content. It is level A, so it is part of every version of WCAG that accessibility laws and guidance point to, including WCAG 2.2 AA. The US Justice Department's guidance on web accessibility and the ADA names missing text alternatives on images as a common barrier.
Accessibility laws and rules in the US, Canada and the EU generally point to WCAG, or to standards built on it, rather than spelling out alt text rules of their own. For what that means for a store, see WCAG 2.2 AA in plain words. This is general information, not legal advice.
Where alt text comes from in Shopify
In Shopify you type alt text in the admin: on each product photo, on collection images, in the theme editor for banners, and on the Files page. Your theme then writes it into the page. Most current themes use Liquid's image_tag filter, which takes the saved alt text by default.
One detail surprises many store owners. For product, variant, collection and article images, image_tag falls back to the product, collection or article title when the alt text field is blank. So a blank field does not give you empty alt text: the shopper may hear the product title once for every photo in the gallery.
{%- comment -%} Uses the alt text saved in the Shopify admin.
If that field is blank, image_tag uses the product title instead. {%- endcomment -%}
{{ product.featured_image | image_url: width: 1200 | image_tag }}
{%- comment -%} A purely decorative pattern: write the img tag
yourself so the alt is empty on purpose {%- endcomment -%}
{%- assign texture = section.settings.texture -%}
<img
src="{{ texture | image_url: width: 1600 }}"
alt=""
width="{{ texture.width }}"
height="{{ texture.height }}"
loading="lazy">For click-by-click steps, bulk editing with a CSV and what to do when a theme drops your text, follow how to add and bulk edit alt text in Shopify.
Common alt text mistakes
How to check alt text yourself
- Paste a page address into the free alt text checker. It lists every image with its alt text and flags missing, vague and very long descriptions.
- Or, in Chrome, right-click an image, choose Inspect and look for
alt=in the highlighted line. Noaltat all means it is missing.alt=""means empty on purpose. - Listen to the page. Turn on VoiceOver or NVDA and move through one product page. Our screen reader testing guide shows the keys to press.
A tool can tell you that alt text is missing. Only a person can tell whether it is right. Plan to read your best-selling product pages yourself.
How Inclusely handles alt text
Questions about alt text
What is alt text?
Alt text (alternative text) is a short written description of an image, stored in the image's alt attribute in the page code. Screen readers read it aloud for people who cannot see the image, browsers show it when the image does not load, and search engines use it to understand the image.
What is an alt tag?
Alt tag is the everyday name for the alt attribute. It is not a separate HTML tag. It is a part of the img tag, written as alt="your description". Alt tag, alt attribute, alt text and alternative text all mean the same thing in practice.
What is the difference between alt text and a caption?
A caption is visible text under or beside an image that everyone can read. Alt text is hidden unless the image fails to load, and it replaces the image for people who cannot see it. The HTML standard says never to put the caption in the alt attribute. If a caption already describes the image, the alt text should add what the caption leaves out.
Does every image need alt text?
Every image needs an alt attribute, but not every image needs words in it. Images that are only decoration, or that repeat text right next to them, should have empty alt text (alt="") so screen readers skip them. A missing alt attribute is different and is a problem, because many screen readers then read the file name.
Is aria-label the same as alt text?
No. Both give an element a text name for screen readers, but alt is the native attribute for images and should be your first choice on an img. aria-label is for things like icon buttons that have no text. If both are on the same image, aria-label wins, which can hide the alt text you wrote.
Does alt text help SEO?
Google says it uses alt text, along with the words around an image and computer vision, to understand what an image shows, and calls alt text the most important attribute for image metadata. It also warns against filling alt text with keywords. Write it for people first.