Clothing and apparel retailers, from national fashion brands to independent boutiques, sell an intensely visual product through an intensely visual website, which is exactly what makes accessibility both hard and non-negotiable. A shopper browses image-heavy product galleries, selects a size and color from swatch pickers, consults a size guide, reads customer reviews and fit notes, checks a sale price, and moves through checkout, and each of those steps routinely fails for people who cannot see the images or use a mouse. Fashion e-commerce is one of the most heavily litigated sectors in web accessibility: the majority of ADA website lawsuits filed each year in the United States target retail, and apparel brands, which lean the hardest on visuals, color swatches, and interactive product zoom, are a disproportionate share. The barriers are also concrete for shoppers: a blind customer who cannot tell which colors are available, a low-vision shopper who cannot read a sale price shown only in light-grey strikethrough, or a keyboard user who cannot open a size guide is effectively locked out of the store. Apparel sites also rely heavily on third-party review, fit-recommendation, and quick-view widgets that are seldom tested with assistive technology, which makes the swatch picker, size guide, and image gallery recurring failure points and demand-letter targets. This guide covers the legal requirements, the most common failures, and a practical compliance checklist for clothing, apparel, and fashion boutiques.

Legal Requirements

Key Accessibility Issues in Clothing, Apparel & Fashion Boutiques

Size and Color Swatch Pickers That Rely on Color and Are Not Keyboard Operable

Selecting a size and color is the core interaction on a clothing product page, and swatch pickers are among the most common accessibility failures in retail. Color swatches frequently convey the option only through a colored square with no text name, mark the selected or out-of-stock state by appearance alone, and cannot be operated or perceived by keyboard and screen-reader users. A blind shopper cannot tell that Sage or Oxblood is the choice, and a color-blind shopper cannot distinguish similar swatches or see which is selected.

How to fix:

Give every swatch a real text name (color and size) exposed to assistive technology, and never convey the option or its selected/unavailable state through color alone (WCAG 2.2 1.4.1). Make swatches keyboard operable with a clear focus indicator and announced selected and out-of-stock states (4.1.2), and reflect the current selection in text near the add-to-cart button.

Product Images, Zoom, and Galleries Without Meaningful Alt Text

Apparel pages are built from photography, front, back, detail, on-model, and swatch shots, plus interactive zoom and 360 views. When these images have empty or generic alt text (image, product, or the filename), a blind shopper gets no information about fit, fabric, cut, or detail, which for clothing is the entire purchasing decision. Interactive zoom and gallery controls are also frequently mouse-only and unlabeled.

How to fix:

Write descriptive alt text that conveys the meaningful visual details a sighted shopper uses, cut, fabric, pattern, and how the garment sits, rather than decorative filler (see alt text and image guidance). Make gallery thumbnails, zoom, and 360 controls keyboard operable with clear accessible names, and ensure the main image updates are announced when the shopper changes color or view.

Size Guides, Fit Finders, and Quick-View Modals That Trap Keyboard Focus

Size guides and fit-recommendation tools open in modals or drawers, and they routinely trap or lose keyboard focus, fail to announce themselves to screen readers, present measurements only as an unlabeled image or color-coded table, and cannot be dismissed with the keyboard. Quick-view popups have the same problems. A keyboard or screen-reader shopper cannot open the size guide, read the measurements, or return to the page, and may get stuck entirely.

How to fix:

Build size-guide, fit-finder, and quick-view modals to accepted dialog patterns: move focus into the dialog on open, trap focus within it, restore focus on close, and allow dismissal with the Escape key. Present size charts as real data tables with proper header cells (WCAG 2.2 1.3.1), not an image, and ensure the dialog is announced with an accessible name when it opens.

Sale Prices, Reviews, and Stock Status Conveyed Only Visually

Fashion pages lean on visual cues that assistive technology misses: sale prices shown as light-grey strikethrough beside red, low-stock urgency badges, star-rating graphics with no text equivalent, and out-of-stock states signalled by a faded swatch. A screen reader user may hear two prices with no indication which is current, get no star rating, or not realize an item is unavailable, and a low-vision shopper may not perceive the discount at all.

How to fix:

Announce sale pricing as clear text (original price, sale price, and that it is a sale) rather than relying on strikethrough and color (see sale price and screen reader guidance), and provide star ratings as text (for example, 4.3 out of 5, 128 reviews). Convey stock and low-stock status in text (WCAG 2.2 1.4.1), and make customer reviews and their controls keyboard operable and screen-reader labeled (see reviews and ratings guidance).

Checkout, Discount Codes, and Account Creation With Unlabeled Fields and Silent Errors

Apparel checkout adds discount-code fields, gift options, express-pay buttons, and account or wishlist creation, and these forms frequently use placeholder-only labels, unlabeled payment iframes, promo-code errors shown only in red, and validation that neither announces nor moves focus. A screen reader user, keyboard user, or shopper with a cognitive disability cannot reliably apply a code, complete payment, or fix an error, abandoning the cart.

How to fix:

Give every field, including discount-code, gift-message, and address inputs, a persistent associated label, and make express-pay and wishlist controls keyboard operable with accessible names. Announce validation and promo-code errors, link them to their fields, and move focus to the first error (WCAG 2.2 3.3.1, 3.3.3); expose the order total and any applied discount as text before charging, and keep multi-step checkout keyboard operable with an announced step indicator.

Compliance Checklist

  • Size and color swatches have real text names and do not convey the option or its state through color alone
  • Swatches are keyboard operable with a visible focus indicator and announced selected and out-of-stock states
  • Product images have descriptive alt text conveying fit, fabric, and detail, and zoom and gallery controls are keyboard operable
  • The main image and price update are announced when the shopper changes color, size, or view
  • Size guides, fit finders, and quick-view modals manage focus correctly and can be dismissed with the Escape key
  • Size charts are real data tables with proper header cells, not an image
  • Sale prices are announced as text (original, sale, and that it is a sale), not conveyed by strikethrough and color alone
  • Star ratings and stock/low-stock status are provided as text, and review controls are keyboard operable and labeled
  • Checkout, discount-code, and account fields use persistent labels, and express-pay controls have accessible names
  • Checkout errors are announced, linked to their fields, and focus moves to the first error; the total and any discount are exposed as text before charging

Further Reading

Other Industry Guides