Last updated: Apr-08-2023
On this page:
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.
This video is brought to you by Cloudinary's video player - embed your own!
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
View a specific asset and its details
Start and stop product videos with the spacebar
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.|
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.|
- 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 GalleryEmbed a Product Gallery in your Web or WordPress site
Upload ProgrammaticallyUse a Cloudinary SDK to upload media assets
Get Started with the CLISet 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.