Image Gallery

An accessible product image gallery with keyboard-navigable thumbnails, previous/next controls, and a live region that announces the current image position to assistive technology.

Demo

Click the Previous and Next buttons to cycle through the main product image. Click any thumbnail to jump directly to that image. Use the keyboard — Tab to reach the controls, then Enter or Space to activate them — and listen for the position announcement that updates as images change.

• 
• 
• 
• 
• 

Image 1 of 5

What to Observe

• The main image has a descriptive alt text that changes as each new image is displayed, conveying the visual content to screen reader users.
• A live region announces the current image position (e.g., "Image 2 of 5") each time the displayed image changes.
• Thumbnail buttons each have an accessible name indicating what they show, so users can choose a specific view without activating it first.
• The currently active thumbnail is indicated both visually and programmatically, allowing screen reader users to identify which image is selected.
• Previous and Next buttons are disabled at the boundaries and communicate their disabled state to assistive technology, not just visually.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Main image: The large featured product image displayed in the gallery viewport; its alt text reflects the specific view shown.
2. Previous button: Navigates to the preceding image in the set; disabled when the first image is active.
3. Next button: Navigates to the following image in the set; disabled when the last image is active.
4. Thumbnail strip: A row of smaller images representing each item in the gallery; each thumbnail is a focusable button.
5. Position live region: A visually displayed or visually hidden element that announces the current image index and total count to screen readers.
6. Selected thumbnail indicator: A visual and programmatic marker on the thumbnail that corresponds to the currently shown main image.

Accessibility Behavior

• The main image's alt text updates programmatically each time the active image changes, ensuring screen reader users always receive a description of what is displayed.
• A polite live region announces the image position (e.g., "Image 3 of 5") after each navigation action so users can track their place in the gallery.
• Each thumbnail button carries an accessible name that describes the view it represents (e.g., "Side view") rather than generic labels like "thumbnail 2".
• The currently selected thumbnail is marked with a programmatic selected or pressed state so it is distinguishable by screen reader users, not just visually.
• Previous and Next buttons communicate their disabled state both visually and to assistive technology when the gallery is at its first or last image.
• All controls are reachable and operable by keyboard with a natural tab order: previous, thumbnails, next.

Common Mistakes

• Using a static or empty alt attribute on the main image so that it never describes the currently displayed photo, leaving screen reader users with no information.
• Implementing thumbnails as styled divs or images without wrapping them in buttons, making them unreachable by keyboard.
• Omitting a live region so that image transitions produce no feedback and users must navigate to the main image to discover what changed.
• Visually disabling Previous and Next at the boundaries without setting the disabled attribute, so keyboard users can still Tab to and activate a broken control.
• Relying solely on a highlighted border to mark the active thumbnail, which becomes invisible for users who cannot distinguish the highlight color.

Why This Matters

Product images are often the most persuasive content on a product detail page. A blind shopper who receives no description of the currently displayed image — or who cannot navigate the gallery at all — is denied the same product information that sighted users take for granted. Inadequate live-region feedback means users must hunt through the page to confirm that navigation worked. Accessible image galleries give every user the ability to inspect a product from multiple angles, read each view's description, and make an informed purchase decision.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code