Accessible Shopify image gallery: an EAA-era checklist

The European Accessibility Act has applied to e-commerce services offered to EU consumers since 28 June 2025, and a year on the questions from store owners have shifted from "does this apply to me" to "where on my store am I actually failing". For most stores the honest answer is the image-heavy parts: galleries, carousels, lookbooks and lightboxes. They are added late, styled to look good, and almost never tested with a keyboard or a screen reader. This guide goes through what an accessible Shopify image gallery has to do, where Snug Gallery handles it for you and where it cannot, and ends with a checklist you can run on any gallery in about ten minutes.

What the EAA actually asks of an online shop

Directive (EU) 2019/882 applies to a list of services provided to consumers after 28 June 2025, and e-commerce services are on the list. The directive itself is written in outcomes (information must be perceivable, operable, understandable and robust) rather than in technical rules; in practice the harmonised standard behind it points at WCAG 2.1 level AA for web content. Microenterprises providing services are exempt under the directive, but the definition is strict (fewer than ten staff and a small turnover), and the exemption does not stop a customer from being unable to use your store. Enforcement is by each member state's market surveillance authority, so how complaints are handled varies by country. If you sell into the EU and are not sure where you stand, that is a question for an adviser, not a blog post.

What a blog post can do is translate WCAG into the things a gallery block has to get right. There are four: every meaningful image needs a text alternative; everything a mouse can do a keyboard must be able to do, with a visible focus indicator; nothing may move or flash in a way the visitor cannot stop; and any overlay, such as a lightbox, must behave like a dialog so a screen reader knows where it is.

Why galleries are where stores fail

A product page from a good theme is usually in reasonable shape, because the theme developer was on the hook for it. Galleries come from apps, or from custom Liquid, and they break the rules in predictable ways: images without alternative text, or all with the same one; a carousel that autoplays and offers no way to pause; arrows and dots built from divs that a keyboard cannot reach; hotspots that appear only on hover; a lightbox that opens with no announcement, traps focus behind it or lets the Tab key wander into the page underneath; and filter bars that look like buttons but are not.

None of these are hard to fix individually. The problem is that a store owner cannot fix them at all if the app that renders the gallery did not build them in, which is why it is worth knowing what your gallery app does before you audit your own content.

Alt text: where it comes from in Snug Gallery

Every image Snug Gallery renders gets an alt attribute, and it is resolved in a fixed order. If you typed an alt text for that gallery item in the app, that wins. If not, the alt text stored on the file in Shopify Files is used. If the file has no alt text either, the gallery's title is used as a last resort so the image is never silently unlabelled. The same text is carried into the lightbox, so the enlarged view is described the same way as the thumbnail.

The fallback is a safety net, not a strategy. Twelve images all announced as "Autumn lookbook" tell a screen reader user nothing about any of them. The right place to fix this is Shopify Files, because alt text set there follows the image everywhere it is used, in the gallery and in any theme section. Shopify's help centre covers adding alt text to media and the media editor will suggest alt text for files that lack it; review the suggestions rather than accepting them blind, since the same photo needs different alt text on a travel site and on an outdoor-gear store, a point Shopify's own accessibility guidance for themes makes well. Keep it under about 125 characters and describe what matters in context: the product, the colour, the setting, not "image of".

Captions are separate. A caption is visible text under or over the image, and it is read by everyone. It does not replace alt text, but where a caption already says everything the image shows, the alt text can be shorter.

Keyboard: everything a mouse can do

Tab through a Snug Gallery block and every interactive element is a real button or link: the open-in-lightbox control on each item, the previous and next arrows, the slider dots, the filter pills, the product hotspots and the close button on a product card. Each has a text label for assistive technology (the arrows say previous and next, each dot says which slide it goes to, each hotspot names its product), and each shows a visible focus ring, which the stylesheet draws with the theme's own colours so it is not lost against your images.

The slider layout goes further: the track itself is focusable and announced as a group of slides, and the left and right arrow keys move between them, so a keyboard user does not have to hunt for the arrow buttons. Filter buttons expose their state with aria-pressed, which is what lets a screen reader say "Portraits, pressed" instead of just "Portraits".

What you still control is what those controls point to. A hotspot on a product that is unpublished, or a filter tag with no items behind it, is a dead end for every visitor, keyboard or not.

Motion: respecting prefers-reduced-motion

WCAG asks that moving content the user did not start can be paused, stopped or hidden. Autoplay in the slider layout is opt-in per block, and Snug Gallery checks the visitor's prefers-reduced-motion setting before starting it: if the operating system says reduce motion, autoplay simply does not start, and the CSS also switches off transitions and hover animations for those visitors. The gallery still works; it just stops moving on its own.

Videos are the other source of motion. Muted inline autoplay is a per-block setting you can leave off, and when it is off a video shows a poster with a play control and plays only when asked, in the lightbox.

The lightbox as a dialog

An enlarged image overlay is the part of a gallery most likely to strand a screen reader user. Snug Gallery's lightbox is marked up as a modal dialog with a label, so assistive technology announces that a viewer has opened rather than leaving the user somewhere on the page underneath. Escape closes it, the left and right arrow keys move between items, the close and navigation controls are labelled buttons, and while a video is playing the keys are left to the video player except for Escape and Tab. The image inside carries the same alt text as the thumbnail that opened it.

A ten-minute checklist for any gallery

Unplug the mouse, or just do not touch it. Load the page and press Tab until you reach the gallery. Every control you can click should receive focus, in a sensible order, with a visible outline.
On a slider, focus the track and press the arrow keys. Slides should move. Press Tab to the dots and arrows; Enter should work on each.
Open the lightbox with Enter. Press Tab a few times: focus should stay inside the viewer. Press Escape: it should close.
Turn on your operating system's reduce-motion setting (Accessibility settings on macOS, Windows, iOS and Android all have one), reload, and confirm nothing autoplays.
Open Shopify admin, go to Content, then Files, and filter or scan for images used in the gallery. Any without alt text, or with a filename as alt text, get a description now.
Run a screen reader over the gallery for two minutes: VoiceOver on a Mac or iPhone, NVDA on Windows. Listen for images announced with useful text, buttons announced with a name, and the lightbox announced as a dialog.
Check the captions and any text baked into the images themselves. Text inside an image is invisible to assistive technology and to search engines; move it to a caption.

What Snug Gallery cannot do for you

It cannot write your alt text; it can only make sure the attribute is always present and pick the best available source. It does not control the colour contrast of your theme, or of caption text you place over busy photos. It cannot make an image that is itself a poster full of small text readable. And it has no opinion on whether your business falls inside or outside the directive's scope. What it does is make the mechanical part, the part store owners usually cannot fix themselves, correct by default, so the audit above is about your content and not about the code that renders it.

If you are replacing an older gallery app and want to know what it will leave behind on the way out, the guide on gallery apps that stop working because of third-party scripts and the one on Shopify Files versus app-hosted images cover the migration side.

Frequently asked questions

Does the European Accessibility Act apply to a small Shopify store?

The directive covers e-commerce services offered to EU consumers from 28 June 2025, with an exemption for microenterprises providing services. Whether your business is a microenterprise under the definition, and how your country's authority enforces the rules, is a question for a legal adviser. The practical steps in this guide help every visitor regardless.

Where should I add alt text for gallery images on Shopify?

In Shopify Files, on the file itself, so the description follows the image wherever it is used. Snug Gallery reads that alt text automatically and lets you override it per gallery item if the same photo needs different wording in a specific gallery.

Is an image carousel accessible?

It can be, if its controls are real buttons with labels, it can be operated from the keyboard, it does not autoplay for visitors who asked for reduced motion, and there is a way to pause or step through it. Snug Gallery's slider meets those conditions; many older carousel scripts do not.

Does an accessible gallery help SEO?

Alt text is the one clear overlap: it is how image search understands a photo, and Google's guidance recommends descriptive alt text. Keyboard and screen reader support do not directly change rankings, but they remove barriers that show up as abandoned sessions.