Image alt
Moderate effortFound on 52% of audited stores.
Add descriptive alt text to every meaningful image, and mark purely decorative images with an empty alt attribute or role="presentation".
What it is
Every `<img>` element on a web page should carry an `alt` attribute that describes what the image shows or does. This text is read aloud by screen readers for visitors who are blind or have low vision, and it appears in place of the image when it fails to load. Meaningful images (products, banners, infographics) need a short, accurate description. Purely decorative images (background shapes, dividers, icons used only for visual flair) should have an empty `alt=""` or `role="presentation"` so screen readers skip them entirely. WCAG Success Criterion 1.1.1 "Non-text Content" requires this for all conformance levels (A, AA, AAA).
Why it matters
Missing alt text directly harms your store in three ways. First, it excludes customers who rely on screen readers — they cannot understand what your products look like, which damages conversions and exposes you to legal risk under accessibility laws (ADA Title III in the US, EAA in Europe, AODA in Canada). Second, search engines like Google read alt text to understand and index your images; missing alt text means your product and category images are invisible to image search, costing you free organic traffic. Third, automated accessibility audits flag missing alt text as a critical failure, and regulators, plaintiff attorneys, and audit tools surface it prominently — making it one of the highest-priority issues to address on any ecommerce site.
How to fix it
- Audit all images on your site — identify which are meaningful (product photos, banners, logos, infographic images, images used as links/buttons) and which are purely decorative (spacers, background textures, decorative dividers).
- For every meaningful image, write a concise alt attribute that describes the image's content or function (e.g., alt="Red leather crossbody bag with gold clasp"). For images used as links or buttons, describe the destination or action (e.g., alt="View our summer sale").
- For every decorative image, set alt="" (empty string — NOT omitted entirely) so screen readers skip it, or add role="presentation" to achieve the same effect.
- Never use generic text like 'image', 'photo', or the filename as alt text — these provide no useful information to assistive technology or search engines.
- Update images that are dynamically generated (e.g., product photos pulled from a catalog) by ensuring your CMS or platform stores and outputs the alt text field for every product image.
- After making changes, re-run an automated accessibility check (e.g., axe DevTools browser extension) and manually verify a sample of pages with a screen reader or the browser's built-in accessibility inspector.
Fix it on your platform
Pick your platform for the exact steps.
How to fix image alt on Shopify
- Product images: Go to Admin → Products → [Product name] → click on any product image thumbnail → an 'Alt text' field appears in the right panel — type your description and click 'Save'.
- Collection images: Admin → Products → Collections → [Collection name] → click the collection image → edit the 'Image alt text' field.
- Theme images (banners, slideshows): In Online Store → Themes → Customize, click any image block — look for an 'Alt text' or 'Image description' field in the left sidebar (exact name depends on theme).
- Blog/page images: In the rich-text editor, click an inserted image → click the 'Edit' (pencil) icon → fill in the 'Alt text' field.
- For bulk updates or to audit many products, use the Shopify bulk editor (Admin → Products → select products → Edit) or export your product CSV, fill in the 'Image Alt Text' column, and re-import.
How to fix image alt on WooCommerce
- Product images: Admin → Products → [Product name] → click the featured image or any gallery image → in the Media Library modal, fill in the 'Alt Text' field on the right side → click 'Update'.
- For all images in the Media Library: Admin → Media → Library → click any image → fill in the 'Alternative Text' field in the Attachment Details panel.
- Theme/banner images: If using a page builder (Elementor, Divi, etc.), click the image widget → find the 'Alt Text' or 'Image Alt' field in the widget settings.
- For bulk alt-text updates consider the 'SEO Optimized Images' or 'Bulk Auto Alt Text' plugins available from the WordPress plugin directory.
- Use the Yoast SEO or Rank Math plugin — they flag images missing alt text during their content analysis and link directly to the edit screen.
How to fix image alt on BigCommerce
- Product images: Admin → Catalog → Products → [Product name] → Images & Videos tab → hover over an image thumbnail and click the pencil/edit icon → fill in the 'Alt Text' field → Save.
- Banner images (via Marketing → Banners): alt text for banners is set in the HTML source — click the HTML editor icon in the banner editor and add alt="..." to the <img> tag.
- Theme images: Storefront → Themes → Advanced → Edit Theme Files → locate the relevant template (.html) and add or correct the alt attribute on <img> tags.
- Page Builder widgets: When adding an image widget in the Page Builder (Storefront → My Themes → Customize), look for an 'Alt Text' field in the widget's right-hand panel.
How to fix image alt on Wix
- Click any image on your page in the Wix Editor → click 'Settings' (gear icon) in the toolbar that appears → fill in the 'What's in the image? Tell Google' (alt text) field → click 'Done'.
- For product images in Wix eCommerce: Wix Dashboard → Store Products → [Product] → Media section → hover over the image → click the pencil icon → edit the 'Alt text' field.
- For Wix Galleries: click the gallery → Manage Media → click the three-dot menu on each image → 'Image Settings' → fill in the 'Alt Text' field.
- Wix automatically uses your image title as a fallback, but writing a custom, descriptive alt text is strongly recommended for accessibility and SEO.
How to fix image alt on Squarespace
- Click any image block on your page → click the pencil/edit icon → in the image editing panel, click the 'Accessibility' tab (or scroll to the 'Alt Text' field) → type your description → Apply.
- For product images: Commerce → Inventory → [Product] → click an image in the Media section → the 'Alt Text' field appears on the right side of the Media Library.
- For gallery blocks: click the gallery → Edit (pencil) → click any individual image → edit the 'Alt Text' field in the image detail view.
- Squarespace does not auto-populate alt text from image filenames, so every image needs a manual entry unless you use a third-party SEO tool.
How to fix image alt on Webflow
- Select any image element on the canvas → in the right-hand Element Settings panel (the gear icon), find the 'Alt Text' field → type a description.
- To mark a decorative image, check the 'Decorative image (no alt needed)' checkbox in the same panel — Webflow will output alt="" automatically.
- For CMS-driven images (e.g., product photos from a Collection): in the CMS Collection settings, ensure you have an 'Alt Text' plain-text field → bind the image's Alt Text property to that field in the Designer.
- Run Webflow's built-in Accessibility Audit (Audit panel → Accessibility) to see a list of all images flagged as missing alt text.
How to fix image alt on Adobe Commerce (Magento)
- Product images: Admin → Catalog → Products → [Product name] → Images and Videos section → hover over an image → click the pencil icon → fill in the 'Alt Text' field → Save.
- CMS Page/Block images: Content → Pages (or Blocks) → [Page/Block] → open the WYSIWYG editor → click an image → click 'Insert/Edit Image' (the image icon) → fill in the 'Image Description' (alt text) field.
- Theme/layout images added via XML or templates: locate the relevant .phtml template file in app/design/frontend/[Vendor]/[Theme]/ → find the <img> tag and add or update the alt attribute, using a translatable string where appropriate (e.g., alt="<?= $block->escapeHtmlAttr(__('Description here')) ?>").
- For bulk product image alt text updates, use the Magento Import/Export feature (System → Data Transfer → Import) with the 'Catalog Products' entity, including the 'small_image_label', 'thumbnail_label', and 'base_image_label' columns.
How to fix image alt on Wix Studio
- Click an image on the canvas → click the 'Settings' icon in the floating toolbar → locate the 'Alt Text' field → enter a descriptive value → click Done.
- For images inside repeaters or CMS-connected galleries, connect the alt text field to a CMS text field: click the image → Connect to Data → map the 'Alt Text' property to the appropriate CMS field.
- Use Wix Studio's built-in SEO panel (Site → SEO → SEO Settings) to review pages with missing image alt attributes.
How to fix image alt on Squarespace Commerce
- Commerce → Inventory → [Product] → click the main product image or any additional image in the media section → the Media Library opens → fill in 'Alt Text' on the right → Save.
- For variant images, edit each variant under the Variants tab, then click the variant image to access its alt text field in the Media Library.
How to fix image alt on Webflow Commerce
- Open the CMS for your Products collection (CMS → Collections → Products) → ensure each product has an 'Image Alt Text' plain-text field.
- In the Designer, select the product image element → in Element Settings, bind the Alt Text property to your 'Image Alt Text' CMS field so alt text is output dynamically for every product.
How to fix image alt on Headless / Custom (I build in code)
- Add an alt attribute to every <img> tag in your HTML/JSX/template code. Meaningful images get a descriptive string; decorative images get alt="".
- In React/JSX: <img src={product.imageUrl} alt={product.imageAlt || product.name} />
- Enforce this at the component level by making alt a required prop and using PropTypes or TypeScript to catch missing values at build time.
- For images fetched from a headless CMS or PIM, ensure the API response includes an alt text field and that your frontend always renders it — never hard-code empty or omit the attribute.
- Add an ESLint rule (eslint-plugin-jsx-a11y: 'jsx-a11y/alt-text': 'error') to your CI pipeline so missing alt text causes a build failure.
How to fix image alt on Magento Open Source
- Product images: Admin → Catalog → Products → select a product → Images and Videos section → hover an image → gear icon → fill 'Alt Text' → Save.
- Bulk via CSV import: Admin → System → Import → Products → ensure `image_label` column is populated for each row → import.
- Template files: Edit `app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/image.phtml` and confirm the `alt` attribute outputs the product's image label or name.
How to fix image alt on PrestaShop
- Product images: Back Office → Catalog → Products → edit a product → Images tab → click an image → fill in the 'Caption' field (this becomes the alt attribute) for each active language → Save.
- CMS page images: Back Office → Design → Pages → edit a CMS page → in the TinyMCE editor, right-click an image → Image Properties → fill in the 'Alternative description (alt text)' field.
- Theme template files: Edit the relevant `.tpl` file (e.g., `themes/<your-theme>/templates/catalog/_partials/product-cover-thumbnails.tpl`) and ensure `{$image.legend}` or a similar variable is output as the `alt` attribute.
How to fix image alt on BigCommerce for WP
- Product image alt text is managed in your BigCommerce admin (see BigCommerce steps above); changes sync to the WordPress storefront automatically via the BigCommerce for WordPress plugin.
- For theme/page-builder images added directly in WordPress: WP Admin → Media → Library → click image → fill 'Alternative Text' field.
Does your site have this issue?
Run a free SEOLZ scan to find image alt — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Image alt?
Every `<img>` element on a web page should carry an `alt` attribute that describes what the image shows or does. This text is read aloud by screen readers for visitors who are blind or have low vision, and it appears in place of the image when it fails to load. Meaningful images (products, banners, infographics) need a short, accurate description. Purely decorative images (background shapes, dividers, icons used only for visual flair) should have an empty `alt=""` or `role="presentation"` so screen readers skip them entirely. WCAG Success Criterion 1.1.1 "Non-text Content" requires this for all conformance levels (A, AA, AAA).
Why does image alt matter?
Missing alt text directly harms your store in three ways. First, it excludes customers who rely on screen readers — they cannot understand what your products look like, which damages conversions and exposes you to legal risk under accessibility laws (ADA Title III in the US, EAA in Europe, AODA in Canada). Second, search engines like Google read alt text to understand and index your images; missing alt text means your product and category images are invisible to image search, costing you free organic traffic. Third, automated accessibility audits flag missing alt text as a critical failure, and regulators, plaintiff attorneys, and audit tools surface it prominently — making it one of the highest-priority issues to address on any ecommerce site.
How do I fix image alt?
Add descriptive alt text to every meaningful image, and mark purely decorative images with an empty alt attribute or role="presentation".
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Web accessibility tutorials — W3C WAI
- Images & text alternatives — W3C WAI