Product Gallery accessibility features (video tutorial)

Overview

Thanks to accessibility features in Cloudinary's Product Gallery, including keyboard accessibility, alt-text for screen readers and multiple levels of zoom, all of your site's visitors can have an amazing experience.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Why accessibility matters

0:00	The people using your websites may have physical disabilities and be unable to use a mouse. Instead, they rely exclusively on their keyboard to navigate and learn about your products. Moreover, those with vision impairments turn to assistive technology in order to access content on the web.

Review product images and videos via keyboard

0:51	Keyboard-only users can navigate to the Product Gallery on a page by using the Tab button, then review product images and videos by pressing Tab and Shift+ Tab to navigate forward and back.

View a specific asset and its details

1:07	Hit Enter to view an asset or zoom into the detail, then use the Escape key to exit the product-focused view.

Start and stop product videos with the spacebar

1:17	The Spacebar is used to play or pause any product video content. For this functionality, you can add a videoProps object to provide these controls.

Example code:

videoProps: {
            controls: "play"
            } // displays only the play/pause video controls

Understand the benefits of alt text

1:29	Visitors' screen readers can provide important product details to those who are visually impaired. Descriptions of an item's colors, materials, textures and styles can help the customer make the right choice.

1:47	Additionally, adding alt-text can even benefit your search engine optimization efforts for your site, helping crawlers at Google and other services to better understand the content.

Add alt-text for your gallery's products

To add alt-text descriptions, open your Cloudinary Console.

1:58	Step 1: Visit the Media Library and double-click the asset you want to manage.

2:09	Step 2: Move to the Metadata tab and add a description in the contextual metadata section.

2:22	Step 3: Add your accessibilityProps to the Product Gallery, specifying the name of the metadata key and indicating the values are associated with the contextual metadata on the assets.

Example code:

accessibilityProps: {
            mediaAltSource: "contextual",
            mediaAltId: "alt_id"
          }

Modify the gallery's zoom controls for keyboard-only use

3:02	Add zoomProps to your Product Gallery to modify its default properties, allowing for a popup to appear with plus and minus icons.

Example code:

zoomProps: {
            type: "popup",
            steps: 3,
            stepLimit: true,
            level: 1.3 // each step zooms in another 130%
          }

Keep learning

If you like this, you might also like...

Check out Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.