AgentKit

Posted on Jul 30 • Originally published at blog.a11yfix.dev

Product Image Zoom and Lightbox Galleries: The Accessibility Trap in Almost Every Online Store

#webdev #a11y

Here is an experiment that takes about thirty seconds and will tell you something uncomfortable about your online store.

Open one of your product pages. Don't touch your mouse. Press Tab until the focus outline lands on the main product photo, then press Enter. If a full-screen zoom view opens, press Escape. Then press Tab a few more times.

On a lot of stores, one of three things happens. The photo doesn't respond to Enter at all, so a keyboard user simply cannot see the zoomed detail your product page is built around. Or the zoom view opens and Escape does nothing, and Tab keeps cycling through links hidden behind the overlay that you cannot see. Or the overlay closes and focus has vanished — the next Tab drops you back at the top of the page, and you have to travel all the way down again.

None of these look like bugs when you use a mouse. All three are accessibility failures, and they sit on the single most important interaction on a product page.

Why the image gallery matters more than you think

For most e-commerce stores, product photos are not decoration. They are the product information. The fabric texture, the size of the connector, the shade of the paint, whether the strap is leather or leather-look — none of that is in the description. It is in the images, and specifically in the zoomed images.

This means the zoom view isn't a nice extra. It is where a customer decides whether to buy. When a shopper who navigates by keyboard, or who uses a screen reader alongside residual vision, or who zooms their browser to 300%, cannot reach it, they are not getting a slightly worse experience. They are being asked to spend money on something they were not allowed to look at properly.

It is also one of the most common patterns flagged in accessibility demand letters against retailers, for a simple reason: it is on every product page. One broken gallery component is not one issue. It is one issue multiplied by your entire catalog.

The five failures that show up over and over

1. The photo is not a real button

Most themes make the product image clickable by attaching a click handler to the image itself, or to a div wrapped around it. To a mouse, that works perfectly. To everything else, that element is not interactive. It cannot receive keyboard focus, it announces itself to a screen reader as an image rather than as something you can activate, and speech-control users who say "click zoom" have nothing to address.

What it should be: the thing you click is a real button (or link) containing the image. That single change gives you keyboard focus, Enter and Space activation, and a screen reader announcement, all for free, because browsers provide that behavior for native elements.

How to test: press Tab and see whether the focus outline ever lands on the image. If it never does, the image is not a button.

2. Escape doesn't close it

The zoom view is a modal — it covers the page and demands your attention until you dismiss it. Every modal on the web has an unwritten contract: Escape closes it. When your lightbox breaks that contract, a keyboard user's only exit is to find a close button they may not be able to reach, which brings us to the next problem.

How to test: open the zoom view, press Escape. It should close. Also check that the visible close button (usually an X in the corner) can be reached with Tab and activated with Enter.

3. Focus escapes behind the overlay

This is the one that catches nearly everyone. When the zoom view opens, keyboard focus needs to move into it and stay there until it closes. If it doesn't, pressing Tab walks focus into the page underneath — the header, the menu, the "add to cart" button, the footer links — all of which are now invisible behind the overlay. The user is tabbing through content they cannot see, with no indication of where they are.

For a sighted keyboard user this is disorienting. For a screen reader user it is worse, because they are being read a page that is no longer on screen.

What it should do: focus moves to the zoom view when it opens, Tab cycles only within it (image, next, previous, close), and when it closes, focus returns to the exact button that opened it.

How to test: open the zoom view and press Tab six or seven times slowly, watching the focus outline. If it disappears from the overlay and starts moving through the page behind it, that's the bug.

4. Focus is lost on close

Closing the zoom should put you back where you started — on the thumbnail or image button you activated. Instead, many lightboxes destroy the overlay and let focus fall back to the top of the document. A keyboard user who was halfway down a long product page now has to Tab through the entire header and navigation again to get back to where they were, and they have to do it every single time they look at a photo.

How to test: note which element had focus before you opened the zoom. Close it and press Tab once. You should land right after where you were, not at the top of the page.

5. Every image says the same thing (or nothing)

Product galleries are notorious for alt text that is technically present and practically useless. The whole gallery reads as "blue-tshirt.jpg" five times, or as the product title repeated identically for every shot, or as nothing at all because the theme left the field empty.

The point of a five-image gallery is that the images show different things. So the alternative text should too:

"Navy cotton t-shirt, front view"
"Back view showing the printed logo between the shoulders"
"Close-up of the ribbed collar and shoulder seam stitching"
"Model approximately 5'10" wearing size medium, relaxed fit through the body"
"Fabric close-up showing the visible weave texture"

That last pair does something a photo alone doesn't: it gives a blind or low-vision customer the fit and texture information sighted shoppers get by squinting at the zoom. It also reduces returns from everyone, which is the argument that tends to get budget approved.

Thumbnails are a separate case. If a thumbnail's only job is to switch the main image, its text alternative should describe what selecting it does ("View back of navy t-shirt"), not repeat the whole description.

The ten-minute audit

You don't need DevTools or any technical knowledge for this. Open a product page and work through the list.

Keyboard, four minutes. Unplug your mouse or just move your hands away from it. Tab to the main image and press Enter. Did anything open? Press Escape. Did it close? Reopen it and Tab several times — does focus stay inside the overlay? Can you reach the next, previous, and close controls? Close it and press Tab once — are you back where you started?

Zoom, two minutes. Set your browser to 300% (Ctrl or Cmd, plus the plus key, about five presses). Open the zoom view. Can you still reach the close button, or has it moved off screen? Is anything cut off with no way to scroll to it?

Screen reader, three minutes. On a Mac, press Cmd+F5 to start VoiceOver; on Windows, download NVDA free. Tab to the image button and listen. Does it announce something like "View larger image, button," or does it just say "image" or read out a filename? Then arrow through the gallery and listen to whether each photo describes something different.

Touch, one minute. On your phone, open the zoom view and try to close it. Is the close target big enough to hit reliably — roughly the size of a fingertip, not a 12-pixel X in the corner? Can you pinch-zoom inside it, or has the theme blocked that?

Write down what fails. That list is what you hand to whoever maintains your site.

What to actually ask for

The useful thing about these five failures is that they are all standard, well-solved problems. You are not asking for research. You are asking a developer to apply a pattern their tooling almost certainly already supports.

Send them this:

Our product image gallery has accessibility issues on every product page. Specifically:

The clickable product image needs to be a real button element, not a div or a bare img with a click handler, so it is keyboard focusable and announced correctly.

The lightbox needs to close on Escape.

Focus needs to be moved into the lightbox when it opens and trapped there while it is open, using aria-modal="true" with an appropriate role="dialog", and the background content should be inert.

On close, focus must return to the element that triggered it.

Every gallery image needs distinct, descriptive alt text, and the gallery CMS fields need to allow per-image alt text if they don't already.

This affects WCAG 2.1 success criteria 1.1.1 (Non-text Content), 2.1.1 (Keyboard), 2.1.2 (No Keyboard Trap), 2.4.3 (Focus Order), and 2.4.7 (Focus Visible).

If you are on Shopify, Squarespace, WooCommerce, or Wix, check your theme's own settings first — some newer themes have already fixed this and let you swap the gallery style, which is faster than a code change. If your theme's gallery is broken and unmaintained, switching themes is sometimes genuinely cheaper than patching it. And if a third-party zoom or gallery app is the culprit, test a competitor before you pay a developer to work around it.

The part worth remembering

Almost no one audits their product gallery, because with a mouse it feels like the most polished part of the store. The animation is smooth, the zoom is crisp, everything works.

That polish is exactly why it goes unchecked for years, quietly turning the most persuasive part of every product page into a dead end for a slice of your customers. Ten minutes with your mouse pushed aside will tell you which side of that line you are on.

DEV Community