Input image alt

Quick win

Found on 1% of audited stores.

Add a descriptive `alt` attribute to every `<input type="image">` element so screen readers can announce its purpose to visually impaired shoppers.

What it is

An `<input type="image">` is an image used as a clickable button — common examples include a custom "Buy Now" graphic, a PayPal button, a search icon, or a branded "Submit" image on a form. Like a regular `<img>` tag, it requires an `alt` attribute that describes what the button does. When that attribute is missing or empty, a screen reader has no text to read aloud, so it either skips the button entirely or announces something unhelpful like the image file name (e.g. "btn_buynow_92x26.gif"). WCAG Success Criterion 1.1.1 — Non-text Content — requires all non-text interactive elements to have a text alternative.

Why it matters

Roughly 7–8 million Americans use screen readers, and missing `alt` text on a button can make it completely impossible for them to complete a purchase or submit a form — a direct loss of sales. Beyond conversions, this is a legal compliance issue: the ADA (Americans with Disabilities Act) and similar laws worldwide increasingly require websites to meet WCAG 2.1 AA standards, and failing audits can trigger demand letters or lawsuits. Google's crawlers also read `alt` text to understand image context; descriptive text on interactive elements contributes to the overall accessibility and quality signals that influence rankings. Fixing this is typically a one-line code change with an outsized positive impact.

How to fix it

Identify every `<input type="image">` on your site — check checkout pages, search bars, newsletter sign-up forms, and any custom button graphics.
For each one, write a short, action-oriented description of what the button does (not what it looks like): e.g. `alt="Submit order"`, `alt="Search products"`, `alt="Pay with PayPal"`.
Add the `alt` attribute directly to the element's HTML tag: `<input type="image" src="buy-now.png" alt="Buy now">`.
Never leave `alt` empty (`alt=""`) on an `<input type="image">` — an empty alt is appropriate only for purely decorative `<img>` tags, not for interactive buttons that must be operable.
After making changes, re-test with a free tool (axe DevTools browser extension or WAVE) to confirm the violation is resolved.
Run a quick manual test: tab to the button using only your keyboard and listen with a screen reader (NVDA on Windows is free; VoiceOver is built into macOS/iOS) to verify the announced text matches the button's purpose.

Fix it on your platform

Pick your platform for the exact steps.

How to fix input image alt on Shopify

In your Shopify admin, go to Online Store → Themes → click the three-dot menu beside your active theme → Edit code.
Use the search box (top-left of the code editor) to search for `type="image"` across all theme files.
For each match found (commonly in `sections/header.liquid`, `snippets/search-form.liquid`, or `templates/cart.liquid`), add or update the `alt` attribute: `<input type="image" src="..." alt="Submit search">`.
If the button is rendered by an app (e.g. a PayPal app), open the app's settings — most reputable payment apps include their own alt text; if not, contact the app developer.
Click Save, then preview the theme and verify with the axe browser extension.

Full Shopify guide →Official Shopify docs ↗

How to fix input image alt on WooCommerce

In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme to avoid overwriting on updates).
Search your active theme's template files (commonly `woocommerce/templates/cart/`, `woocommerce/templates/checkout/`, or `header.php`) for `type="image"`.
Add the `alt` attribute to any matching `<input>` tag and save the file.
Alternatively, install the 'Code Snippets' plugin and add a WordPress filter to programmatically inject the alt attribute without editing core files.
If the image button is injected by a plugin (e.g. PayPal Checkout), check the plugin's settings panel for an alt/label field, or file a support request with the plugin author.
Flush any caching plugin (e.g. WP Rocket, W3 Total Cache) after saving, then verify with axe DevTools.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix input image alt on BigCommerce

In your BigCommerce admin, go to Storefront → My Themes → click Customize on your active theme → Edit Theme Files (Advanced).
Search the Stencil template files (`.html` files under `templates/`) for `type="image"`.
Add `alt="[descriptive action text]"` to each matching `<input>` tag and save.
If the button is part of a payment widget injected via the Optimized One-Page Checkout, go to Store Setup → Payments and check if the provider's SDK supplies its own alt text; if not, contact BigCommerce support or the payment provider.
Publish the theme change and test with the axe browser extension on your live storefront.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix input image alt on Wix

Wix does not expose raw HTML for standard site elements, but if you added an `<input type="image">` via Wix's Dev Mode (Velo), open your site in the Wix Editor, enable Dev Mode (Manage → Dev Mode), and locate the relevant page code or site code.
Find the element in the page's code panel and add the `alt` property: `$w('#myImageInput').alt = 'Submit search';` or set it in the HTML Component's markup.
If you embedded a third-party button (e.g. PayPal) via an HTML iframe/Embed widget, edit the embedded HTML block and add `alt="..."` to the `<input type="image">` tag inside it.
Publish the site and verify with axe DevTools.

Full Wix guide →Official Wix docs ↗

How to fix input image alt on Squarespace

Squarespace restricts direct HTML editing for most elements, but `<input type="image">` buttons typically appear in Code Blocks or in injected code.
Go to Pages → select the relevant page → click the Code Block containing the image button → Edit, and add `alt="[action text]"` to the `<input>` tag.
For site-wide injections (e.g. in the header/footer), go to Settings → Advanced → Code Injection, locate the relevant `<input type="image">` snippet, and add the `alt` attribute.
Save and preview, then verify with axe DevTools.

Full Squarespace guide →Official Squarespace docs ↗

How to fix input image alt on Webflow

Open your project in the Webflow Designer.
If the `<input type="image">` was added via an Embed element, click the Embed component on the canvas to open its HTML editor, find the `<input>` tag, and add `alt="[descriptive text]"`.
If it is a native Webflow Form element using an image submit button, select the element on the canvas, open the Element Settings panel (D key), and fill in the Alt Text field.
Publish the site and verify with axe DevTools or WAVE.

Full Webflow guide →Official Webflow docs ↗

How to fix input image alt on Adobe Commerce (Magento)

Locate the relevant `.phtml` template file in your custom theme under `app/design/frontend/<Vendor>/<Theme>/`. Common locations: `Magento_Checkout/templates/`, `Magento_Search/templates/`, or a payment module template.
Search for `type="image"` within those template files.
Add `alt="<?= $escaper->escapeHtmlAttr(__('Submit order')) ?>"` (using Magento's escaper and translation helper) to each matching `<input>` tag.
Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` after saving.
Verify on the frontend with the axe browser extension.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find input image alt — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Input image alt?

Why does input image alt matter?

How do I fix input image alt?