Product Gallery accessibility features (video tutorial)
Last updated: Sep-02-2024
On this page:
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
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
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
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
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:
Understand the benefits of alt text
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. |
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.
Step 1: Visit the Media Library and double-click the asset you want to manage. |
Step 2: Move to the Metadata tab and add a description in the contextual metadata section. |
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:
Modify the gallery's zoom controls for keyboard-only use
Add zoomProps to your Product Gallery to modify its default properties, allowing for a popup to appear with plus and minus icons. |
Example code:
Keep learning
Related topics
- Use the tutorial's associated sandbox to test all of the shown features.
- Review all of the functionality available in the Product Gallery.
- Check out our Product Gallery demonstration page with many more aspects, including event and analytics tracking.
If you like this, you might also like...
Product Gallery
Embed a Product Gallery in your Web or WordPress siteUpload Programmatically
Use a Cloudinary SDK to upload media assetsGet Started with the CLI
Set up the CLI and get familiar with some basic commands
Check out the 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.
✖️