Accessible product image galleries, sliders and carousels

An accessible product gallery or carousel can be used with a keyboard, a screen reader and a single tap. That means real buttons with names for previous, next and each thumbnail; alt text that says what each photo shows; a zoom view that opens and closes from the keyboard; a way to change slides without dragging or swiping; and, if anything moves on its own, a visible pause button. WCAG 2.2 requires a way to pause any automatically moving content that lasts more than five seconds next to other content (2.2.2, level A).¹⁰

W3C's carousel tutorial sums up the four needs: users must be able to pause movement, everything including moving between items must work by keyboard, changes must be communicated to everyone including screen reader users, and keyboard focus must be managed sensibly.¹¹

Two different components

Movement: give people a way to stop it

Criterion 2.2.2 applies to moving, blinking or scrolling content that starts automatically, lasts more than five seconds and is shown alongside other content: there must be a way to pause, stop or hide it.¹⁰ W3C's explanation says the five-second limit was chosen as long enough to get attention, and that content which changes on a timer, such as an auto-advancing presentation, needs a way to pause it too.¹ It also warns that a control which only stops the movement while the person keeps focus or the pointer on it does not count.¹

W3C's carousel tutorial recommends three things together:²

1. A visible play/stop button that switches between "Stop slides" and "Start slides". Update the existing button's label rather than swapping in a new button, so keyboard focus is not lost.
2. Pause while the mouse is over the carousel, so people can read and click.
3. Pause while keyboard focus is inside it, so keyboard users do not lose their place.

The ARIA Authoring Practices carousel pattern adds that rotation should stop when any element in the carousel receives keyboard focus and stay stopped until the user restarts it, and that the rotation control should be the first stop inside the carousel.⁴

The simplest option is not to autoplay at all. Shopify's help guidance for merchants is that slideshows and videos should not play automatically, and its developer guidance says autoplaying slideshows must be pausable and autoplaying video in a slideshow must be muted.⁸⁷ If your theme's slideshow section has an autoplay setting, turning it off removes the problem.

Controls: real buttons with real names

• Previous and next must be button elements with names such as "Previous image" and "Next image". An arrow icon alone is announced as "button" with nothing else.
• Thumbnails and dots are controls too. Name each one, for example "Image 3 of 6: back view", and show which one is current both visually and in text. W3C's tutorial marks the active item both visually and with visually hidden text.³
• Keep focus where it is when previous or next is pressed, so the person can press it again. W3C's tutorial and the ARIA pattern both say these buttons should not move focus.³⁴
• Announce the change. W3C suggests a polite live region announcing which item is shown, such as "Image 2 of 6".³ The ARIA pattern turns announcements off while a carousel is rotating automatically, so screen readers are not interrupted every few seconds.⁴
• Make them big enough to tap. Small dots under a slideshow often fail 2.5.8 Target Size, which asks for at least 24 by 24 CSS pixels or enough spacing.¹⁰

The ARIA pattern also describes how to label the whole thing: a container with the role description "carousel" and a name, and each slide as a group with the role description "slide".⁴

Swiping and dragging need an alternative

On phones, product galleries are often swipe-only. WCAG 2.5.7 Dragging Movements (level AA) asks that anything done by dragging can also be done with a single pointer without dragging. W3C's own example is a content carousel that can be dragged, with forward and back buttons as the alternative.⁵ A swipe is a path-based gesture, and W3C notes that the single-pointer alternative cannot rely on swiping either.⁵ So keep the arrow buttons visible on mobile, or make thumbnails tappable.

Zoom and lightbox views

Many themes open a full-screen image viewer when a product photo is clicked. Treat it as a modal dialog. The ARIA dialog pattern says focus moves into the dialog when it opens, Tab and Shift+Tab stay inside it, Escape closes it, and focus returns to the element that opened it.⁶ Shopify's guidance for theme modals says the same.⁷ Give the dialog a name, such as the product title, and the close button a name such as "Close".

Hover zoom, where a magnified view appears as the pointer moves over the image, needs care. If it covers other content, WCAG 1.4.13 asks that it can be dismissed without moving the pointer, for example with Escape, that the pointer can move onto it without it vanishing, and that it stays until dismissed or the pointer leaves.⁹ Keyboard users need a way to reach the same detail, such as a "View larger" button that opens the dialog.

Alt text in galleries

Each photo in a gallery usually shows something different: the front, the back, a detail, the product in use. The alt text should say what that photo adds, not repeat the product name six times. Thumbnails that duplicate the main images can be named as controls ("Show image 3: back view") rather than described twice. If a gallery includes a video, it needs captions; see captions, transcripts and audio description. For writing the descriptions, see how to write alt text that helps.

Test a gallery and a carousel in five minutes

1. Keyboard: Tab to the gallery, move through every image with the buttons, open the zoom view, close it with Escape and check focus comes back to where you were.
2. Movement: on the homepage, can you find and use a pause button? Does the slideshow stop when you tab into it?
3. Phone: can you change images by tapping, without swiping?
4. Screen reader: do the arrows, dots and thumbnails have names? Is the current image announced?
5. Automated: Jralo's free check finds buttons with no name and images with no alt text on your homepage and up to five linked pages, and suggests which countries' accessibility laws are likely relevant to your store. It cannot judge whether a pause button works or whether alt text is useful; automated testing finds many problems, not all.

If your theme's gallery fails these checks, the fix is usually in one template, so it fixes every product at once. Our guide to fixing accessibility without breaking your theme covers how to change it safely.