Cloudinary Logo Docs Documentation
  • Get Started
    • Programmable Media
      • Developer get started guide
      • Service overview
      • Try it! Explorers and demos
      • Using Cloudinary Postman collections
      • How are transformations counted?
      • Glossary
      • Release notes
    • Digital Asset Management
      • DAM get started guide
      • Release notes
    • Video tutorial library
      • Programmatic asset management
      • Transformations and optimizations
      • Digital Asset Management (DAM)
      • Administration
      • Platform integrations
  • Guides
    • Upload
      • Overview
      • Uploading assets
      • Transformations on upload
      • Analysis on upload
      • Upload presets
      • Upload API reference
    • Image transformations
      • Image transformations overview
      • Resizing and cropping
      • Placing layers on images
      • Effects and enhancements
      • Face-detection based transformations
      • Animated images
      • Transformations on 3D models
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Custom functions
      • Image collage generation
    • Video transformations
      • Video transformations overview
      • Resizing and cropping
      • Trimming and concatenating
      • Placing layers on videos
      • Effects and enhancements
      • Audio transformations
      • Video generation
      • Advanced video transformations
    • Optimization
      • Overview
      • Image optimization
      • Responsive images
      • Video optimization
      • Adaptive bitrate streaming
      • Audio optimization
    • Delivery
      • Deliver remote media files
      • Social media profile pictures
      • Paged and layered media
      • Media access methods
      • Sprite generation
      • Advanced URL delivery options
    • Administration
      • Overview
      • Managing assets
      • Backups and version management
      • Account usage data
      • Webhook notifications
      • Signatures
    • Widgets and players
      • Upload Widget
      • Media Library Widget
      • Media Editor
      • Product Gallery
      • Video Player
    • Native mobile development
    • Add-ons
      • Advanced Facial Attributes Detection
      • Amazon Rekognition AI Moderation
      • Amazon Rekognition Video Moderation
      • Amazon Rekognition Auto Tagging
      • Amazon Rekognition Celebrity Detection
      • Aspose Document Conversion
      • Cloudinary AI Background Removal
      • Cloudinary AI Content Analysis
      • Cloudinary Duplicate Image Detection
      • Google AI Video Moderation
      • Google AI Video Transcription
      • Google Auto Tagging
      • Google Automatic Video Tagging
      • Google Translation
      • Imagga Auto Tagging
      • Imagga Crop and Scale
      • JPEGmini Image Optimization
      • Perception Point Malware Detection
      • Microsoft Azure Video Indexer
      • Neural Artwork Style Transfer
      • OCR Text Detection and Extraction
      • Pixelz - Remove the Background
      • URL2PNG Website Screenshots
      • VIESUS™ Automatic Image Enhancement
      • WebPurify Image Moderation
    • Digital Asset Management
      • DAM overview
      • DAM user guide
      • DAM administrator guide
    • Media Optimizer
      • Overview
      • Quick starts
      • Configuration
      • Dashboard
      • Reports
      • Transformations
    • Platform integrations
      • Adobe Creative Cloud Connector
      • Akeneo PIM Integration
      • Chrome Media Library Extension
      • Magento Extension
      • Salesforce Commerce Cloud Cartridges
      • Salesforce Marketing Cloud App
      • SAP Commerce Extension
      • Shopify App
      • WordPress Plugin
      • Zapier Integration
      • Partner-built integrations
      • How to build your own integration
    • Pre-releases and labs
      • MediaFlows (Beta)
      • AR/3D Viewer and 3D Model Configurator
      • Media Inspector browser extension
  • References
    • Transformation URL API
    • Upload API
    • Admin API
    • Search API
    • Structured metadata
      • Metadata API
      • Conditional metadata rules API
    • Provisioning API
    • Cloudinary CLI
    • Postman collections
    • Upload Widget API
    • Video Player API
    • Product Gallery API
    • Media Editor API
    • Media Optimizer
      • Media Optimizer API
      • Transformation reference
  • SDKs
    • Backend SDKs
      • Node.js SDK
      • Python SDK
      • PHP SDK
      • Java SDK
      • Ruby/Rails SDK
      • .NET SDK
      • Go SDK
      • Dart SDK
      • PHP SDK (Legacy)
    • Frontend SDKs
      • React SDK
      • Vue.js SDK
      • Angular SDK
      • JavaScript SDK
      • jQuery SDK
      • React SDK (Legacy)
      • Vue.js SDK (Legacy)
      • Angular SDK (Legacy)
      • JavaScript SDK (Legacy)
    • Mobile SDKs
      • iOS SDK
      • Android SDK
      • Kotlin SDK
      • Flutter SDK
    • Community-developed libraries
      • Gatsby
      • Gridsome
      • Laravel
      • Netlify
      • Next.js
      • NuxtJS
      • Storefront UI
BlogTrainingSupportPricingCommunityMediaJamsPodcastsDemosRoadmapCookbookAdditional Resources
  • Blog
  • Training
  • Support
  • Pricing
  • Community
  • MediaJams
  • Podcasts
  • Demos
  • Roadmap
  • Cookbook
  • Additional Resources
Login
sign up for free
  • Get Started
    • Programmable Media
      • Developer get started guide
      • Service overview
      • Try it! Explorers and demos
      • Using Cloudinary Postman collections
      • How are transformations counted?
      • Glossary
      • Release notes
        • Latest: Feb 21, 2023
        • Archives
          • Dec 27, 2022
    • Digital Asset Management
      • DAM get started guide
      • Release notes
        • Latest: March 22, 2023
        • Archives
          • Feb 22, 2023
          • Nov 21, 2022
    • Video tutorial library
      • Programmatic asset management
        • Programmatic upload and delivery
          • Upload programmatically
          • Create upload presets
          • Auto-tag assets
          • Diagnosing error codes
          • Upload assets in a React app
          • Deliver images with the Next.js Image component
        • Interaction with Cloudinary APIs
          • Generate upload signature
          • Postman collections introduction
        • Cloudinary SDKs
          • Find your credentials
          • Configure the Node.js SDK
          • Configure the Vue.js SDK
        • Cloudinary CLI
          • Get started with the CLI
          • Scripting with the CLI
          • Get creative with the CLI
          • Upload with the CLI
        • Widgets
          • Upload Widget
          • Product Gallery
          • Product Gallery accessibility
      • Transformations and optimizations
        • Get started with transformations
          • Transformation basics
          • Optimization tips
          • Gravity-based crops for images
          • Content-aware video cropping
          • Convert videos to animated images
        • Advanced transformation features
          • Text overlay transformations
          • Complex transformations
          • Named transformations
          • Advanced image components
          • Zoompan effect
          • Video transformations
        • Transformations for social media
          • Social media image cards in Next.js
      • Digital Asset Management (DAM)
        • DAM administration
          • Folder sharing
          • Collection management
          • Collection sharing
          • Transformation presets
        • Using DAM features
          • Media Library upload
          • Video management intro
          • Advanced Search
      • Administration
        • Enable automatic backups
        • Restore asset versions
        • Restore deleted assets
      • Platform integrations
        • Adobe CC Connector overview
        • SAP Commerce Extension overview
        • Salesforce Commerce Cloud cartridges
          • SFCC B2C Commerce cartridge intro
          • SFCC B2C Commerce cartridge installation
          • SFCC B2C Commerce cartridge modes
          • SFCC B2C Commerce cartridge videos
          • SFCC Page Designer cartridge
        • Salesforce Marketing Cloud app
          • SFMC app - image block
          • SFMC app - video to GIF block
        • Shopify app
        • Netlify plugin
  • Guides
    • Upload
      • Overview
      • Uploading assets
      • Transformations on upload
      • Analysis on upload
      • Upload presets
      • Upload API reference
    • Image transformations
      • Image transformations overview
      • Resizing and cropping
      • Placing layers on images
      • Effects and enhancements
      • Face-detection based transformations
      • Animated images
      • Transformations on 3D models
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Custom functions
      • Image collage generation
    • Video transformations
      • Video transformations overview
      • Resizing and cropping
      • Trimming and concatenating
      • Placing layers on videos
      • Effects and enhancements
      • Audio transformations
      • Video generation
      • Advanced video transformations
        • Converting videos to animated images
        • Conditional transformations
        • User-defined variables and arithmetic transformations
        • Live streaming
          • Live streaming WebRTC (Beta)
          • Live streaming RTMP
          • Simulated live streaming
    • Optimization
      • Overview
      • Image optimization
      • Responsive images
        • Using HTML and dynamic image transformations
        • Using JavaScript frontend frameworks
        • Using the cloudinary-core JS library
        • Using client hints
      • Video optimization
      • Adaptive bitrate streaming
      • Audio optimization
    • Delivery
      • Deliver remote media files
      • Social media profile pictures
      • Paged and layered media
      • Media access methods
      • Sprite generation
      • Advanced URL delivery options
    • Administration
      • Overview
      • Managing assets
      • Backups and version management
      • Account usage data
      • Webhook notifications
      • Signatures
    • Widgets and players
      • Upload Widget
      • Media Library Widget
      • Media Editor
      • Product Gallery
      • Video Player
        • Video Player features
        • Installation and setup
        • How to embed the Video Player
        • Video Player customization
        • Playlists and recommendations
        • HLS and MPEG-DASH
        • Events and analytics
        • Video ads and monetization
        • Shoppable Video
        • Interactive Video (Beta)
        • Video Player API reference
    • Native mobile development
    • Add-ons
      • Advanced Facial Attributes Detection
      • Amazon Rekognition AI Moderation
      • Amazon Rekognition Video Moderation
      • Amazon Rekognition Auto Tagging
      • Amazon Rekognition Celebrity Detection
      • Aspose Document Conversion
      • Cloudinary AI Background Removal
      • Cloudinary AI Content Analysis
      • Cloudinary Duplicate Image Detection
      • Google AI Video Moderation
      • Google AI Video Transcription
      • Google Auto Tagging
      • Google Automatic Video Tagging
      • Google Translation
      • Imagga Auto Tagging
      • Imagga Crop and Scale
      • JPEGmini Image Optimization
      • Perception Point Malware Detection
      • Microsoft Azure Video Indexer
      • Neural Artwork Style Transfer
      • OCR Text Detection and Extraction
      • Pixelz - Remove the Background
      • URL2PNG Website Screenshots
      • VIESUS™ Automatic Image Enhancement
      • WebPurify Image Moderation
    • Digital Asset Management
      • DAM overview
      • DAM user guide
        • Uploading and storing assets
        • Folders and collections
        • Media asset search
          • Global Search
          • Advanced Search
          • Query Builder
          • Visual Search (Beta)
        • Managing individual media assets
      • DAM administrator guide
        • User and group management
          • SAML SSO
        • Settings and preferences
          • Dynamic folders
        • Upload presets
        • Structured metadata
        • Asset management
        • Usage data
        • Dynamic templating
    • Media Optimizer
      • Overview
      • Quick starts
        • Walkthrough
        • Deliver from a web address
        • Deliver from an AWS S3 bucket
        • Deliver from a Google Storage bucket
        • Deliver using an HTTP proxy
      • Configuration
      • Dashboard
      • Reports
      • Transformations
    • Platform integrations
      • Adobe Creative Cloud Connector
      • Akeneo PIM Integration
      • Chrome Media Library Extension
      • Magento Extension
        • Magento product catalog API
      • Salesforce Commerce Cloud Cartridges
        • B2C Commerce Cartridge
          • Operational overview
          • B2C Commerce Cartridge for SFRA
          • B2C Commerce Cartridge for SiteGenesis
          • B2C Commerce Cartridge FAQ
        • Page Designer Cartridge
          • Custom integration
      • Salesforce Marketing Cloud App
      • SAP Commerce Extension
      • Shopify App
        • User guide
      • WordPress Plugin
        • Developer guide
      • Zapier Integration
      • Partner-built integrations
        • Agility Custom Field
        • Actindo Connection
        • Builder.io App Extension
        • Chioro Operation
        • Comestri Channel
        • Conscia Connector
        • Contentful App
        • Contentstack Custom Field Extension
        • Creative Force Asset Delivery
        • GraphCMS UI Extension
        • Kontent.ai Custom Element
        • Magnolia DAM Connector
        • Movidmo Upload Connector
        • OpenText TeamSite Connector
        • Sanity Plugin
        • Sitefinity DAM System Integration
        • Smint.io Data Source Connector
        • Stackbit Integration
        • Storyblok App Integration
        • Syndigo Advanced DAM App
        • Uniform Integration
        • Vue Storefront Component
      • How to build your own integration
    • Pre-releases and labs
      • MediaFlows (Beta)
        • Overview
        • Getting started
        • User Guide
        • Block reference
      • AR/3D Viewer and 3D Model Configurator
        • Oveview
        • Customizations
        • 3D Model Configurator
      • Media Inspector browser extension
  • References
    • Transformation URL API
    • Upload API
    • Admin API
    • Search API
    • Structured metadata
      • Metadata API
      • Conditional metadata rules API
    • Provisioning API
    • Cloudinary CLI
    • Postman collections
    • Upload Widget API
    • Video Player API
    • Product Gallery API
    • Media Editor API
    • Media Optimizer
      • Media Optimizer API
      • Transformation reference
  • SDKs
    • Backend SDKs
      • Node.js SDK
        • Node.js introduction
        • Node.js quick start
        • Node.js image and video upload
        • Node.js image transformations
        • Node.js video transformations
        • Node.js asset administration
      • Python SDK
        • Python introduction
        • Python quick start
        • Python image and video upload
        • Python image transformations
        • Python video transformations
        • Python asset administration
      • PHP SDK
        • PHP introduction
        • PHP quick start
        • PHP image and video upload
        • PHP image transformations
        • PHP video transformations
        • PHP asset administration
        • PHP SDK reference
      • Java SDK
        • Java introduction
        • Java quick start
        • Java image and video upload
        • Java image transformations
        • Java video transformations
        • Java asset administration
      • Ruby/Rails SDK
        • Ruby/Rails introduction
        • Ruby/Rails quick start
        • Ruby/Rails image and video upload
        • Ruby/Rails image transformations
        • Ruby/Rails video transformations
        • Ruby/Rails asset administration
        • CarrierWave integration
        • Attachinary integration
        • Active Storage integration
      • .NET SDK
        • .NET introduction
        • .NET quick start
        • .NET image and video upload
        • .NET image transformations
        • .NET video transformations
        • .NET asset administration
      • Go SDK
        • Go introduction
        • Go quick start
        • Go image and video upload
        • Go media transformations
        • Go asset administration
        • Go SDK Reference
      • Dart SDK
        • Dart introduction
        • Dart quick start
        • Dart image and video upload
        • Dart media transformations
      • PHP SDK (Legacy)
        • PHP introduction
        • PHP image and video upload
        • PHP image transformations
        • PHP video transformations
        • PHP asset administration
        • PHP migration guide
    • Frontend SDKs
      • React SDK
        • React introduction
        • React quick start
        • React image and video upload
        • React image transformations
        • React video transformations
        • React SDK reference
        • Transformation Builder reference
      • Vue.js SDK
        • Vue.js introduction
        • Vue.js quick start
        • Vue.js image and video upload
        • Vue.js image transformations
        • Vue.js video transformations
        • Vue.js SDK reference
        • Transformation Builder reference
      • Angular SDK
        • Angular introduction
        • Angular quick start
        • Angular image and video upload
        • Angular image transformations
        • Angular video transformations
        • Angular SDK reference
        • Transformation Builder reference
      • JavaScript SDK
        • JavaScript introduction
        • JavaScript quick start
        • JavaScript image and video upload
        • JavaScript image transformations
        • JavaScript video transformations
        • JavaScript SDK reference
        • Transformation Builder reference
      • jQuery SDK
        • jQuery introduction
        • jQuery image and video upload
        • jQuery image transformations
        • jQuery video transformations
      • React SDK (Legacy)
        • React introduction
        • React image and video upload
        • React image transformations
        • React video transformations
        • React migration guide
      • Vue.js SDK (Legacy)
        • Vue.js introduction
        • Vue.js image and video upload
        • Vue.js image transformations
        • Vue.js video transformations
        • Vue.js migration guide
      • Angular SDK (Legacy)
        • Angular introduction
        • Angular image and video upload
        • Angular image transformations
        • Angular video transformations
        • Angular migration guide
      • JavaScript SDK (Legacy)
        • JavaScript introduction
        • JavaScript image and video upload
        • JavaScript image transformations
        • JavaScript video transformations
        • JavaScript migration guide
    • Mobile SDKs
      • iOS SDK
        • iOS introduction
        • iOS image and video upload
        • iOS image transformations
        • iOS video transformations
      • Android SDK
        • Android introduction
        • Android image and video upload
        • Android image transformations
        • Android video transformations
      • Kotlin SDK
        • Kotlin media transformations
      • Flutter SDK
        • Flutter introduction
        • Flutter quick start
        • Flutter image and video upload
        • Flutter media transformations
    • Community-developed libraries
      • Gatsby
      • Gridsome
      • Laravel
      • Netlify
      • Next.js
      • NuxtJS
      • Storefront UI
Login
sign up for free
  • Get Started
  • Video tutorial library
  • Programmatic asset management
  • Widgets
  • Product Gallery accessibility

Product Gallery accessibility features (video tutorial)

Last updated: Nov-14-2022

On this page:

  • Overview
  • Video tutorial
  • Tutorial contents
  • Keep learning

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


This video is brought to you by Cloudinary's video player - embed your own!

Tutorial contents

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

Why accessibility matters

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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:

Understand the benefits of alt text

Jump to this spot in the video  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.
Jump to this spot in the video  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.

Jump to this spot in the video  1:58 Step 1: Visit the Media Library and double-click the asset you want to manage.
Jump to this spot in the video  2:09 Step 2: Move to the Metadata tab and add a description in the contextual metadata section.
Jump to this spot in the video  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:

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

Jump to this spot in the video  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:


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 site
Upload Programmatically
Use a Cloudinary SDK to upload media assets
Get Started with the CLI
Set up the CLI and get familiar with some basic commands

 

Cloudinary Academy

 

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.

 

✔️ Feedback sent!

✖️  
How helpful was this doc page?

Thanks for submitting your rating. We got it!
We'd love to hear more. Tell us what you liked and how we can make this page even better:

*


Cloudinary is committed to protecting your information security. For details, see our privacy policy.

For additional assistance, open a support request.

Error

Unfortunately there's been an error sending your feedback.

Rate this page:

  • Product Gallery (video tutorial)
  • Transformation and optimization tutorials
Cloudinary Logo - White
Products
  • Programmable Media
  • DAM
  • Demos
  • Pricing
  • Roadmap
  • FAQ
Solutions
    • Why Cloudinary
    • Video API
    • E-commerce
    • Retail
    • Media & Entertainment
    • Travel & Hospitality
    • Non-Profits
    • Our Customers
    • Resource Library
    Developers
    • Getting Started
    • Documentation
    • Community
    • SDKs
    • Add-ons
    • Podcasts
    • Cookbook
    Company
    • About Us
    • Customers
    • Partners
    • Events
    • Careers
    • Newsroom
    • Blog
    • Brand Assets
    • Trust
    Contact Us
    • Technical Support
    • Contact Sales
    • Education & Training
    • Institute of Quality & Control
    • GDPR
    • SOC
    • Forbes Best Startup Employers 2020
    • MarTech Breakthrough Awards
    • Best Places to Work SVBJ 2018
    • 2020 The World's Best Cloud Companies
    • Terms of Use
    • Privacy Policy
    • DMCA Notice

    © 2023 Cloudinary. All rights reserved.