ZeDaq.ai
Menswear shopper viewing a suit on a fashion store website

Shopify Accessibility Checklist for Clothing Stores

By the ZeDaq.ai team · · 4 min read

On this page
  1. Why does accessibility matter for a clothing store?
  2. What is WCAG, and what level should you aim for?
  3. How do you describe product images?
  4. Is your color contrast readable?
  5. Can shoppers use the store with a keyboard?
  6. Are your forms and size guides clear?
  7. What about apps and add-ons?
  8. How do you keep checking over time?

A Shopify accessibility checklist for a clothing store covers six areas: image descriptions, color contrast, keyboard use, forms, size information and any apps you add. The common yardstick is the Web Content Accessibility Guidelines (WCAG), and Level AA is the usual target.

This is general information, not legal or tax advice. Use it to find and fix problems on your store, and check with a qualified professional about what applies to you. If you add third-party tools such as virtual try-on on Shopify, include them in your checks.

Why does accessibility matter for a clothing store?

Fashion sites lean on images, color and small touch targets, which are exactly the things that cause barriers. Shoppers who use screen readers, keyboards, voice control or magnification need to be able to browse, choose a size and pay.

In the United States, the Department of Justice says the ADA requires businesses open to the public to give equal access to their goods and services, including those offered on the web. The same guidance says there is no regulation setting detailed technical standards, and it names WCAG as a helpful source. Other countries have their own rules, so check your market.

What is WCAG, and what level should you aim for?

WCAG is a set of guidelines published by the W3C. WCAG 2.2 organizes its rules under four principles: content must be perceivable, operable, understandable and robust.

Each rule is rated A, AA or AAA. Level AA is the common target for stores, because it covers most everyday barriers without extreme design limits.

How do you describe product images?

Every product image that carries information needs a text alternative. WCAG success criterion 1.1.1 asks for text that serves the same purpose as the image.

For clothing, write what a buyer would want to know:

  • Garment type, color and pattern.
  • Fit or length if it is visible, such as "midi length".
  • Which view it shows, such as "back view".

In Shopify, add this as Alt text on each product image in the admin. Leave purely decorative images with empty alt text where your theme allows it.

Is your color contrast readable?

Text must stand out from its background. WCAG 2.2 criterion 1.4.3 asks for a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text.

Check these places first:

  • Light gray text on white in product details.
  • White text on a pastel banner.
  • Sale prices in red on a dark background.
  • Placeholder text inside form fields.

Do not use color alone to show meaning. A "sold out" size should say so in words, not only appear faded.

Can shoppers use the store with a keyboard?

Try this test in five minutes. Put your mouse aside and use only Tab, Shift+Tab, Enter and Space.

  1. Can you reach the menu, search and cart?
  2. Is there a visible focus outline on every link and button?
  3. Can you choose a size and color without a mouse?
  4. Can you open and close pop-ups, and does focus return to where you were?
  5. Can you finish checkout?

Choose a current Shopify theme and test it, instead of assuming it works. Themes differ, and customizations can break them.

Are your forms and size guides clear?

Forms need visible labels, not only placeholder text. Error messages should say what went wrong and how to fix it.

Size guides deserve special care:

  • Use a real HTML table with header cells, not an image of a chart.
  • State the unit, centimeters or inches.
  • Put the guide text on the page, so screen readers can read it.

If you collect measurements, explain why you ask and what you do with them. A related read is the Shopify store launch checklist for fashion brands, which covers the wider pre-launch tasks.

What about apps and add-ons?

Every app you add can bring its own accessibility issues. Review each app's pop-ups, buttons and text with the keyboard test above.

Ask the app's maker whether they test against WCAG. ZeDaq.ai is an AI try-on and size tool; test its button and window on your own theme, as you would any app. If you are weighing platform options at larger scale, see Shopify Plus for fashion brands.

Shoppers who cannot use a photo-based tool still need another route, such as a clear size chart and a contact option.

How do you keep checking over time?

Accessibility is not a one-time task. New banners, sections and apps can add problems.

  • Re-run the keyboard test after each theme change.
  • Check new product images for alt text.
  • Review your size guide whenever it changes.
  • Keep a short list of known issues and fix them in order.

A shopper-facing look at fit tools is in the guide to virtual fitting rooms for clothing websites.

Add size and try-on tools to your Shopify store

FAQs

Does Shopify make my store accessible automatically?

No. Themes and apps vary, and your own content, such as alt text and contrast choices, also matters. Test your own store.

Which WCAG version should I use?

WCAG 2.2 is the current W3C Recommendation. Content that meets 2.2 also meets 2.0 and 2.1.

Are automated accessibility scanners enough?

They catch some problems, such as missing alt text, but not all. Combine them with manual checks like the keyboard test.

Do I need legal advice?

Possibly. This is general information, not legal advice, and the rules differ by country. A qualified professional can tell you what applies to your store.

Try ZeDaq.ai free

Virtual try-on and Find my size for your store, plus client, order and invoicing tools for tailors, in one subscription.

Related articles