Watching Image Zoom Controls for Keyboard Traps and Lost Focus

Product image zoom opens a lightbox that swallows focus, hides the close button from keyboards, and strands shoppers inside a gallery. The checks that catch it before customers do.

Click a product image and the zoom viewer opens beautifully. Now try to leave it without a mouse. On too many stores you cannot, or not cleanly: Tab cycles through thumbnails forever, Escape does nothing, the close control is an X drawn with CSS that keyboards skip entirely, and when you finally do get out, focus restarts at the top of the page and your place is gone. That is a keyboard trap in the plain sense of WCAG 2.1.2, and it sits on the highest value page on the store.

Zoom is also where alt text and image descriptions go to be forgotten. The main image gets a description. The zoomed view, the second angle, the size comparison shot in the gallery, often get a filename or nothing. Watching zoom means watching both problems: the container that traps people, and the content inside it that was never described.

The exit test

Run the test in a fixed order so results compare month to month. Tab to the image, open zoom with Enter, tab through every control inside the viewer, close it with Escape, close it again with the visible close button using the keyboard, and note where focus lands each time. Focus should return to the image or control that opened the viewer. Landing on the page top means the shopper starts over, and on a long product page that is a real cost.

Check the arrow keys too. Many galleries promise left and right arrow navigation and deliver it only while a thumbnail has focus, or hijack the arrows so a screen reader user cannot read the product details nearby. Note which keys work and where focus has to be for them to work. That detail is what a developer needs; zoom is broken is what tickets die of.

Inside the viewer

While zoomed, check three things. Is there a text alternative or caption for what the zoom is meant to show, like fabric weave or a clasp mechanism, or is the entire point of zooming unavailable to someone who cannot see the image? Does zooming with browser magnification to 200 percent still work, or does the viewer lock its own scale and fight the browser? Can a touch user pinch and pan without the page scrolling away underneath?

Magnification deserves its own line because stores double up badly here. A built in zoom widget plus browser zoom plus a magnifier app can conflict, and the widget usually wins by trapping the gesture. WCAG 1.4.10 Reflow and 1.4.4 Resize Text do not map neatly onto image viewers, which is exactly why a manual note matters more than a scan score for this component.

What to do with a bad viewer

If the vendor viewer traps focus, the short term answer is to simplify: open the full size image in a normal page or a well behaved dialog with a real close button, a heading, and focus that returns properly. A plain dialog that behaves beats a rich viewer that does not, every time, and shoppers rarely mourn the animation.

Log zoom in the component watch list with the gallery, because the two ship together in theme and app updates. A gallery fix that passes in October can be undone by a November performance update that lazy loads the viewer differently. Components that have trapped focus once earn permanent watching, not a one time pass.

Related reading: Watching Sticky Help Buttons and Chat Bubbles Cover Focus, Watching Wishlist and Save for Later Controls Drift, Watching Checkout Progress Indicators That Screen Readers Miss.

Frequently asked questions

What counts as a keyboard trap in a zoom viewer?

If keyboard focus enters the viewer and cannot leave by a standard key or a reachable close control, that is a trap under WCAG 2.1.2 No Keyboard Trap. Escape not working and a close icon that is not focusable are the two most common causes on product pages.

Where should focus go when zoom closes?

Back to the image, thumbnail, or button that opened it. Returning focus to the top of the document forces keyboard users to navigate the whole page again to resume shopping, which punishes exactly the interaction the zoom was supposed to help with.

Does the zoomed image need alt text?

The zoom view needs the information it exists to provide. If zooming shows weave, stitching, a mechanism, or label text, that content should be available as a description or caption. Repeating the main image alt text word for word adds little; describe what the closer view adds.

Can a scan find zoom traps?

Scans can flag a close control with no accessible name or a viewer missing dialog semantics. The trap itself, focus behaviour over time, needs a keyboard pass. It takes about two minutes per template and should be scripted so different testers run the same sequence.