How do you make a Shopify product image gallery accessible?
Product galleries are where keyboard and screen reader users get stuck most often: thumbnail buttons with no names, zoom traps, and carousels that announce nothing. Fix the thumbnails, the main image, and the zoom, and the gallery stops being a barrier.
Name every thumbnail
The most common gallery failure is also the simplest: thumbnail buttons with no accessible name. The scanner sees a row of buttons, the screen reader announces "button, button, button," and the shopper has no idea which one shows the red variant and which shows the size chart. Every thumbnail needs a name that says what it shows: "View image 2: side profile," not "thumbnail."
This is usually a theme-level fix, not a content fix, because the thumbnails are generated by the theme's gallery code. Check whether the theme passes alt text or image position into the thumbnail button's aria-label. Many themes label the main image correctly and leave the thumbnails blank, which means the fix is a few lines in the gallery snippet.
While you are there, mark the active thumbnail. The currently displayed image's thumbnail should carry aria-current="true" so the shopper knows where they are in the set. Without it, selecting thumbnails feels like pressing buttons in the dark.
The main image needs a real description
The main product image does the selling, so its alternative text has to do real work. "Product image" tells a screen reader user nothing. A useful description covers what the image shows that the text does not: the color, the angle, the visible detail, the context. "Women's trail runner in rust red, side view showing the lugged sole" is a description someone can shop with.
For galleries with many images, the descriptions should differ from each other. If all six images share the same alt text, the shopper hears the same sentence six times and learns nothing from images two through six. Vary them by what each image adds: the detail shot describes the detail, the lifestyle shot describes the setting, the scale shot describes the size reference.
Video thumbnails and 3D model viewers need the same treatment. A 3D viewer button labeled "view in 3D" is a fine start, but the viewer itself must be keyboard operable once opened, which most are not. If the theme's 3D viewer traps the keyboard, file that against the theme as a defect instead of accepting it as a quirk.
Do not trap the zoom
Image zoom is the gallery feature most likely to trap keyboard users. The pattern is familiar: activate zoom, and focus disappears into a magnified pane with no way out except refreshing the page. The fix is unglamorous but non-negotiable: move focus into the zoom when it opens, and return focus to the triggering thumbnail when it closes.
Test the Escape key. Every zoom, lightbox, and fullscreen gallery view must close on Escape and put focus back where the shopper was. This is the single most reported gallery complaint from keyboard users, and it is a small fix in most implementations.
Check the zoom controls themselves too. Plus and minus buttons need accessible names, and the zoom level should be perceivable somehow. A magnifier that only works on hover excludes everyone who does not use a mouse, which includes a large share of mobile shoppers.
Test the gallery like a shopper
Automated scans catch the missing names but miss the experience failures. Once a quarter, run the gallery with keyboard only: tab through the thumbnails, activate each one, open the zoom, close it, and confirm you always know where you are. Then run it with a screen reader and confirm the announcements make sense in sequence.
Pay special attention to variant changes. When a shopper picks a new color, the gallery usually swaps its image set. Confirm the swap is announced, the thumbnails update their names, and focus does not get thrown to the top of the page. Variant-driven gallery swaps are the top source of gallery regressions after theme updates, because the update changes the swap logic and nobody retests it.
Write the gallery test down as a checklist and run it after every theme update. Galleries are high-traffic, high-visibility components. An hour of manual testing per quarter is cheap insurance against the most shoppable part of the product page being the least usable.