> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Gallery accessibility features (video tutorial)

## Overview

Thanks to [accessibility features](product_gallery#accessibility) in Cloudinary's [Product Gallery](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!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Why accessibility matters

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=0 :sec=00 :player=cld} | The people using your websites [may have physical disabilities and be unable to use a mouse](https://cloudinary.com/blog/enhanced_accessibility_for_cloudinary_s_product_gallery_widget#benefits_of_accessibility). 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

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=0 :sec=51 :player=cld} | Keyboard-only users [can navigate to the Product Gallery on a page](product_gallery#accessible_navigation) 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

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=1 :sec=07 :player=cld} | Hit   `Enter` to [view an asset or zoom into the detail](product_gallery#accessible_navigation), then use the `Escape` key to exit the product-focused view. |

### Start and stop product videos with the spacebar

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=1 :sec=17 :player=cld} | The `Spacebar` is used to play or pause any product video content. For this functionality, you can add a [videoProps](product_gallery_reference#videoprops) object to provide these controls.

**Example code:**

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

### Understand the benefits of alt text

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=1 :sec=29 :player=cld} | Visitors' screen readers [can provide important product details to those who are visually impaired](https://www.w3.org/standards/webdesign/accessibility). Descriptions of an item's colors, materials, textures and styles can help the customer make the right choice. |

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=1 :sec=47 :player=cld} | 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](https://console.cloudinary.com/console/).

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=1 :sec=58 :player=cld} | **Step 1:** Visit [the Media Library](dam_digital_asset_management#media_library_overview) and [double-click the asset you want to manage](media_library_for_developers#managing_assets).  |

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=2 :sec=09 :player=cld} | **Step 2:** Move to the **Metadata** tab and add a description [in the contextual metadata section](media_library_for_developers#tags_contextual_metadata_and_structured_metadata_values). |

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=2 :sec=22 :player=cld} | **Step 3:** Add your [accessibilityProps](product_gallery_reference#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:**

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

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

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=3 :sec=02 :player=cld} | Add [zoomProps](product_gallery_reference#zoomprops) to your Product Gallery to modify its default properties, allowing for a popup to appear with plus and minus icons.

**Example code:**

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

## Keep learning

> **READING**: - Use [the tutorial's associated sandbox](https://codesandbox.io/p/devbox/jolly-mayer-lssy4c) to test all of the shown features.
- Review [all of the functionality available](product_gallery) in the Product Gallery.
- Check out [our Product Gallery demonstration page](https://demo.cloudinary.com/product-gallery/) with many more aspects, including event and analytics tracking.
- See how the Product Gallery can improve [e-commerce workflows](ecommerce_workflows_product#deliver_product_assets_to_your_e_commerce_website).

#### 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 
  

 

 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.