Four checks for a more usable Shopify product page.

Images

Describe product images that carry useful information.

Open a product page and compare each image with the nearby product name and description. If a photo adds a detail a shopper needs—such as a color, material, fit, or a different view—give that image concise alt text. In Shopify admin, open Products, choose the product, select its media item, and edit the alt text.

• Describe what is visibly different in this image, not the whole product page.
• Give alternate angles or close-ups distinct descriptions when they show new details.
• Skip filenames, keyword lists, and openings such as “image of.”

If an image is only decorative or repeats information already given in text, it should be ignored by assistive technology. In the storefront theme, that means an empty alternative such as alt=""; do not fill it with “decorative image.” Check the rendered page, since a theme can create images outside the product media editor.

Color and contrast

Check text against the surface shoppers actually see.

1. Review body copy, small labels, prices, links, button text, and input hints on each product template. Use a contrast checker with the foreground and background colors from the live storefront.
2. For normal-sized text, aim for at least 4.5:1. Large text can use 3:1 (at least 24 CSS pixels, or about 19 pixels when bold). Button and form-control text still counts as text.
3. Check the boundary or icon that identifies a control—such as an input border or selected swatch—against adjacent colors. Those visual cues need at least 3:1 when they are needed to find or understand the control.
4. For text over a product photo or banner, inspect the whole text area, including the brightest and darkest parts behind the letters. A ratio that works on one part of a photo may fail on another.

When a pair is too faint, change the text or surface color in Shopify’s theme settings or section settings. If a photo is behind text, add a solid text panel, move the copy, or strengthen the background treatment. Recheck buttons, focus states, and mobile layouts after the change.

Structure

Read the heading list, not just the font sizes.

Use a browser accessibility tool or a screen reader’s heading list to review the page in order. Ask whether each label tells a shopper what follows and whether the sequence makes sense without seeing the visual design.

• On a product page, use the product title as the main page heading, usually an h1. Check the published theme has not added a competing or duplicate page heading.
• Use h2 for sections such as Materials and care or Customer reviews, then h3 for a subsection within one. Give collection sections names that describe the products in them.
• Keep the semantic levels in order: a page heading, then major sections, then subsections. Don’t choose a heading level only to make its text look smaller or larger; style it with the theme instead.
• Check product details, recommendations, and related-product sections as well as the main description. Make sure repeated headings are still clear in context.

Keyboard-only review

Shop the page without reaching for a mouse.

Reload the page, put your hands away from the mouse, and use Tab, Shift + Tab, Enter, Space, and arrow keys where controls call for them.

1. Move through the store header, navigation, search, and collection links. Check that focus is visible and follows a sensible reading order; open and close menus with the keyboard.
2. On a product page, reach each variant, size or color option, quantity field, and add-to-cart control. Change a selection and add the item without a mouse.
3. When the cart opens, move through its items, quantity controls, remove buttons, and checkout action. Close the drawer with Escape if supported, and check that focus returns to the control that opened it.
4. Continue into checkout and move through the available fields and controls. Check that each action can be completed from the keyboard and that focus never gets trapped; stop before placing a real order.

If focus disappears, an option cannot be changed, or a drawer cannot be entered or dismissed, note the step and device. Ask your theme developer to repair the control and repeat the full journey.