Ecommerce Accessibility Checklist: Practical WCAG Fixes for Online Stores

An online store can look finished and still block buyers. A customer cannot tab to the size selector. The checkout error says "invalid" but does not say which field is wrong. Product images have file-name alt text. A coupon pop-up traps keyboard users. Low-contrast sale prices disappear for shoppers with low vision. None of these problems require a giant enterprise accessibility program to start fixing.

If you sell products online, accessibility is both a customer-experience issue and a legal-risk issue. The U.S. Department of Justice says inaccessible web content can deny people with disabilities equal access to information and services, and it has published guidance on web accessibility and the ADA. See: https://www.ada.gov/resources/web-guidance/

WCAG, the Web Content Accessibility Guidelines from W3C, is the most commonly used technical standard for web accessibility. WCAG 2.2 explains how to make web content more accessible for people with visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. See: https://www.w3.org/TR/WCAG22/

This checklist is not legal advice and does not guarantee ADA compliance. It is a practical implementation aid for small ecommerce teams that need to find and fix obvious barriers.

Start where revenue happens

Do not begin with a random page audit. Start with the path a buyer takes to give you money.

Review these pages first:

• Homepage or main collection page
• Product listing page
• Product detail page
• Cart
• Checkout
• Account login or guest checkout
• Shipping and payment screens
• Order confirmation
• Return/refund policy
• Contact/support page

For each page, test with three simple questions:

1. Can someone understand what is on the page without relying only on visuals?
2. Can someone operate the page with a keyboard?
3. Can someone recover when a form error happens?

Those three questions will catch many of the highest-friction ecommerce issues.

Check product images and alt text

Product images sell the item, so alt text matters. The goal is not to stuff keywords into image descriptions. The goal is to give a useful text alternative for the information the image provides.

W3C's alt decision tree explains how to decide whether an image needs alt text and what kind. See: https://www.w3.org/WAI/tutorials/images/decision-tree/

Practical rules:

• If the image shows the product, describe the product and the relevant visual detail.
• If the image communicates size, color, texture, packaging, or included accessories, include that information.
• If nearby text already gives the same information, do not duplicate every word.
• If an image is purely decorative, it can usually have empty alt text.
• Do not use file names like IMG_2041.jpg or keyword strings like "best handmade candle soy candle gift."

Better examples:

• "Black leather crossbody bag with brass buckle and adjustable strap."
• "Set of four ceramic mugs in cream, sage, rust, and navy."
• "Sizing chart showing chest, waist, and hip measurements in inches."

Bad product alt text can be worse than missing alt text because it wastes the shopper's time.

Make every control keyboard usable

Many shoppers use a keyboard, switch device, voice control, or screen reader. If your store only works with a mouse, parts of the buying path are inaccessible.

Test this yourself:

1. Load a product page.
2. Put your mouse aside.
3. Press Tab repeatedly.
4. Confirm you can see where focus is.
5. Select product options.
6. Change quantity.
7. Add to cart.
8. Open the cart.
9. Apply or ignore a coupon.
10. Proceed through checkout as far as you safely can.

Look for failures:

• Focus disappears or is too faint to see.
• The keyboard gets trapped in a pop-up.
• Dropdowns, color swatches, accordions, or product tabs cannot be opened.
• The cart drawer opens but focus stays behind it.
• "Add to cart" works visually but does not announce a change.
• Required checkout fields cannot be reached.

WCAG includes success criteria for keyboard access, focus visibility, labels, and status messages. W3C's quick reference is useful when you need to look up the exact criteria and techniques: https://www.w3.org/WAI/WCAG22/quickref/

Fix checkout form labels and errors

Checkout is where small accessibility mistakes become abandoned carts.

Every form field should have a visible label. Placeholder text is not a reliable label because it disappears when someone types. Labels should be clear:

• Email address
• Shipping address line 1
• Apartment, suite, or unit
• City
• State
• ZIP code
• Card number
• Expiration date
• Security code

When an error happens, tell the customer which field is wrong and what to do next. W3C's explanation of WCAG Success Criterion 3.3.1 says the user must be aware an error occurred and be able to determine what is wrong; simply re-displaying the form is not enough. See: https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html

Useful checkout errors:

• "Email address is missing. Enter an email address like name@example.com."
• "ZIP code must be five digits."
• "Card number is incomplete."
• "Select a shipping method before continuing."

Weak checkout errors:

• "Invalid."
• "Error."
• Red outline only, with no text.
• A toast message that disappears before the customer can read it.

Check color contrast on prices, sale labels, and buttons

Ecommerce themes often use pale gray text, low-contrast brand colors, or sale badges that look nice but are hard to read.

Audit these elements:

• Product titles
• Original price and sale price
• Discount labels
• Variant labels
• Stock status
• Shipping deadlines
• Error messages
• Checkout buttons
• Disabled buttons
• Footer links

Use a contrast checker and compare against WCAG thresholds. Do not rely on your own monitor or eyesight. A button that looks fine on a large desktop display may fail on a phone in bright light.

Also make sure color is not the only signal. If an out-of-stock option is shown only by changing the swatch color, add text or another programmatic indicator. If an error is shown only with a red border, add an error message.

Review pop-ups, banners, and third-party widgets

Small stores often add accessibility problems through apps:

• Email capture pop-ups
• Cookie banners
• Review widgets
• Loyalty widgets
• Chat widgets
• Size-guide apps
• Countdown timers
• Upsell drawers
• Buy-now-pay-later widgets

Test each widget with keyboard navigation and a mobile screen size. Can it be opened, understood, dismissed, and ignored? Does it cover the checkout button? Does it trap focus? Does it create a close button that has no accessible name?

If a third-party app creates barriers, contact the vendor, adjust settings, or replace it. "The app did it" does not help the customer complete the purchase.

Make policies and support pages readable

Accessibility is not only code. A return policy written as one giant paragraph can be hard for anyone to use.

Improve:

• Headings for shipping, returns, refunds, exchanges, damaged items, and contact steps
• Plain-language timelines
• Bulleted steps
• Descriptive link text, not "click here"
• Contact alternatives where reasonable
• Clear order-information requirements for support requests

Your support content should help the shopper resolve a problem without guessing.

A simple weekly ecommerce accessibility routine

You do not need to audit the entire site every Friday. Pick a routine you can maintain:

1. Test one buyer path with keyboard only.
2. Review five new product images for useful alt text.
3. Check one checkout or account form for labels and errors.
4. Test one pop-up or third-party widget.
5. Record issues in a simple spreadsheet with page, issue, severity, owner, and status.
6. Re-test fixes before marking them done.

Keep screenshots and notes. If you later need help from a developer, theme vendor, accessibility consultant, or attorney, a clear issue log is much more useful than "make the site ADA compliant."

Where the getdigi kit fits

The Ecommerce Accessibility Starter Kit turns this checklist into ready worksheets for store owners: page audit logs, product-image alt text review, checkout form checks, app/widget review, issue-priority tracking, and plain-language remediation notes. It is for small teams that need to start fixing obvious barriers before they can justify a full professional audit.

Use it as an implementation aid, not a legal conclusion. WCAG testing can be technical, ADA obligations depend on facts and jurisdiction, and some issues require professional accessibility or legal review. But the basics above are worth doing now because they help real customers buy from you.