Keyboard Navigation for Product Image Galleries
Thumbnails, zoom, and video on product pages are where keyboard users get stuck most often. A practical pattern for galleries that work without a mouse.
The product gallery is the closest a shopper gets to holding the item. When thumbnails cannot be reached by keyboard, when zoom opens a viewer with no exit, or when a video autoplays with hidden controls, that inspection step is closed to a large group of buyers.
Galleries look simple and fail in predictable places. This guide sets out a gallery pattern that holds up under keyboard, screen reader, and touch use, and a short test routine to keep it that way.
Make thumbnails real buttons with useful names
Each thumbnail should be a button or link in the tab order, with a name that describes the view it shows, such as front view, back view, or worn on model. Image 1, image 2 tells a screen reader user nothing about what will change when they activate it.
The selected thumbnail needs a visible and programmatic state, so a shopper knows which view is showing without guessing from the main image. Keep the order of thumbnails matching the order of the images they load.
Keep the main image and its description in sync
When a thumbnail is activated, the main image and its alternative text should update together, and focus should stay on the thumbnail the shopper chose. Moving focus to the main image on every selection forces a keyboard user to tab back through the set for each view.
Alternative text should describe the view that matters for buying: colour, pattern, closure, or detail shown. Decorative angles can be marked decorative, but the primary views that carry product information cannot be.
Build zoom and fullscreen viewers that can be left
Zoom should be available without a mouse: a labelled button that opens the enlarged view, arrow key or button navigation between images, and a close control that is reachable, visible, and returns focus to the gallery. A viewer that only closes with a small icon in a corner fails at high zoom.
Respect reduced motion settings in gallery transitions and video. A crossfade that is fine for one shopper is disorienting for another, and the setting exists on the device precisely so sites can honour it.
Test galleries with real product data
A gallery that works with three tidy test images can break with twelve supplier images, mixed aspect ratios, and a video in position two. Test on the messiest real product in the catalogue, with keyboard only, then with a screen reader, then on a phone with touch.
Add gallery checks to image upload guidance for staff: file naming, alternative text per view, and a rule that no essential information appears only inside an image. Most gallery barriers start as content habits, not code defects.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Accessible Checkout Error Recovery That Saves the Order, Writing an Accessibility Statement That Stays Current, and Making Loyalty and Rewards Programs Accessible End to End.
Frequently asked questions
How many thumbnails should be in the tab order?
All of them, as real controls, in visual order. A shopper should be able to reach and activate any view by keyboard, and to tell which view is currently selected without relying on sight alone.
Does zoom need a keyboard alternative?
Yes. Provide a button that opens an enlarged view that can be navigated and closed by keyboard, with focus handled predictably. Hover only zoom excludes keyboard and many touch users entirely.
What alternative text should product views have?
Text that names the view and the buying relevant detail it shows, such as the back closure or the fabric close up. Views that add no information can be marked decorative to reduce noise.
How often should galleries be retested?
After any theme, app, or media player change, and whenever a new media type is added, such as video or 3D. Gallery defects usually arrive with a component update, not with a redesign.