A shopper lands on one of your product pages from a search result. If they can see the photos, pick a size and press the button, the sale is a few clicks away. If they use a screen reader, the same page may announce “image, image, image”, a row of unlabeled buttons where the colors are, and nothing at all when the item goes into the cart. Most of them leave without saying anything.
Accessible product pages fix that gap. This post walks through the parts of a typical product page in the order a shopper meets them, what usually goes wrong with each, and how to check it yourself. The checkout steps that follow are a separate topic, covered in our guide to an accessible checkout.
Accessible product pages start with what the shopper hears first
Before any image or button, a screen reader user hears the page title and usually jumps to the main heading. On a product page that heading should be the product name, marked up as the one top-level heading. Many themes get this right. Some page-builder layouts turn the product name into styled text and put the top heading on the store name instead.
Below the name, the price and short description should come next in reading order, not after a block of related products. A quick way to check is to turn off the page styles in your browser’s developer tools, or use the headings list in a screen reader, and read the page top to bottom. Does it still make sense as a product page?
Product image alt text that helps someone decide
Alt text on a product photo has one job: tell a shopper who cannot see the photo what the photo shows that matters for buying. “Blue shirt” is thin. “Navy linen shirt, front view, with a button-down collar” is useful. The second gallery image might be “Back view showing the pleat between the shoulders”, and a lifestyle shot might be “Shirt worn untucked with tan chinos”.
A few habits that keep it manageable on a store with hundreds of products:
- Describe what each image adds. If the third photo shows the label, say so. If it shows the fabric close up, describe the texture.
- Do not stuff keywords or repeat the full product title on every image. A shopper tabbing through a gallery hears it each time.
- Keep specifications in the page text. Alt text is not the place for dimensions, materials or care instructions.
- Images that are text, such as a “30-day returns” badge, need alt text that says the same words.
The mechanics of entering it in the media library are covered in our walkthrough of alt text for WordPress images. Writing it in bulk for a large catalog is a content job worth planning; our alt text and captions work covers doing it at scale.
Galleries, thumbnails and zoom
The gallery is often the hardest part of a product page to use without a mouse. Common symptoms:
- Thumbnails that can be clicked but not reached with the Tab key, so a keyboard user only ever sees the first image.
- Arrow buttons drawn as icons with no text name, read out as “button”.
- A hover zoom that follows the mouse and has no keyboard equivalent. That is usually fine as long as there is another way to see a larger image, such as opening it in a lightbox.
- A lightbox that opens but leaves keyboard focus behind on the page, so pressing Tab moves through links hidden underneath it. Pressing Escape should close it and return focus to the image that opened it.
Test it this way: put your mouse aside, press Tab until you reach the gallery, and try to view every image and close the enlarged view. Wherever you get stuck or lose your place, a keyboard-only shopper will too.
Swatches, sizes and other options
Options are where accessible product pages most often break down, because themes and plugins like to replace a plain dropdown with something prettier.
Color and pattern swatches
A swatch drawn as a colored circle needs a text name that a screen reader can announce, such as “Forest green”. The selected swatch should look different in a way that does not rely on color alone: a thicker border, a check mark, or the chosen name written next to the swatches. A pale cream swatch on a white page is a common failure here: the edge of a control people must pick out should reach a 3:1 ratio against its surroundings (that is criterion 1.4.11 in WCAG).
Size and other choices
Buttons for sizes are fine if they behave like a group of choices: reachable by keyboard, announced with their label, and with the selected one clearly marked. If a size is out of stock, say so in text (“Large, sold out”) instead of just graying it out. A crossed-out button tells a sighted shopper something that a screen reader user never hears.
When choosing an option changes the price or the main image, the change should not move keyboard focus or reload the page without warning. If the price updates, a short announcement helps.
Size guides
Size guides often live in a popup containing a table, or worse, a picture of a table. A real HTML table with column and row headers is readable by a screen reader; an image of one is not, unless the same information is written out somewhere. If the guide opens in a popup, it needs a close button with a name and should be closable with Escape.
Quantity, price and stock messages
The quantity box needs a label, even if it is visually hidden. Plus and minus buttons beside it need names like “Increase quantity”, not just the symbols. Shoppers on phones press these with a thumb, so tiny plus and minus signs crammed against the box cause mis-taps. The 2.2 version of WCAG sets a floor of 24 by 24 CSS pixels for such controls, unless smaller ones have enough clear space around them.
Sale prices are a quiet trap. Many themes show the old price struck through and the new one beside it. Visually that is obvious. To a screen reader it may read as two prices with no hint which one applies. Adding hidden text such as “Original price” and “Sale price” solves it.
Stock and delivery messages that appear in red or green should also say what they mean in words, because color alone does not reach everyone.
Reviews and questions
Star ratings are usually icons. Each set needs a text equivalent like “Rated 4 out of 5”, and the review count link should say where it goes. Review forms need labeled fields and a rating control that works by keyboard; a row of stars that only responds to clicks shuts some people out of leaving a review at all.
If reviews load in pages or through a “Load more” button, the new reviews should appear after the ones already read, with focus kept at a sensible spot instead of jumping back to the top.
Add to cart feedback
This is the moment that decides whether someone keeps shopping. When the button is pressed, three patterns are common, and each needs a different check.
- The page reloads with a notice. The notice should be near the top of the main content and announced or easy to find. Check that it is not hidden behind a sticky header.
- The item is added without a reload. A visible message should appear, and a status message (WCAG 4.1.3) should tell screen reader users “Added to cart” without moving their focus.
- A side cart or drawer slides in. Focus should move into the drawer, the drawer should have a clear heading and a named close button, and closing it should put focus back on the add to cart button.
Also check what happens when something goes wrong. If a shopper forgets to pick a size, the error should say “Choose a size” next to the size options and be announced, not just turn the button red.
A short test you can run on one product page
Pick your best-selling product and spend fifteen minutes on it:
- Use only the keyboard. Tab through the page, open the gallery, choose an option, change the quantity and add to cart.
- Zoom the browser to 200 percent and check that the price, options and button still fit without scrolling sideways.
- Run a free scanner such as WAVE and see whether it flags product photos without descriptions, unnamed buttons or pale text.
- If you can, listen to the page with a screen reader: NVDA on Windows or VoiceOver on a Mac or iPhone. Listen for unnamed buttons and silent updates.
Fix the template, not each product. Most of these problems live in the theme or plugin that builds every product page, so one fix often covers the whole catalog. The rest of the journey, from menus to order emails, is mapped in our full store accessibility walkthrough, while the full service picture, from first audit to monthly checks, lives on our website accessibility hub.
Frequently asked questions
How long should product image alt text be?
Long enough to say what a sighted shopper would learn from the photo, and no longer. For most product shots that is a short phrase naming the item and the detail the image shows, such as the color or the angle. Put specifications, materials and care instructions in the page text, where everyone can read them.
Do I need alt text on every image in a product gallery?
Each image that shows something different needs its own description, such as the back view, the lining or the item being worn. If two gallery images are truly the same picture at different sizes, only one needs alt text. Avoid repeating the product name alone on every image, because a screen reader user learns nothing new from it.
Are color swatches an accessibility problem?
They can be. A swatch that is only a colored circle gives no name to a screen reader and can be hard to tell apart for people with low vision or color blindness. Give each swatch a text name, show the selected state with more than color alone, and make sure the swatches can be reached and chosen with a keyboard.
What should happen after someone presses add to cart?
The shopper should be told clearly that the item was added, without losing their place. A visible message near the button plus an announcement for screen readers works well. If a mini cart or drawer opens instead, keyboard focus should move into it, and closing it should bring focus back to the button.
If your store runs on WooCommerce and you would like the product template, gallery and option controls checked and fixed properly, our WooCommerce accessibility fixes page explains how we work through them and record what changed.
Next in this series: Shopify Accessibility: What Store Owners Can Fix
