Cloudinary Blog

Enhanced Accessibility for Cloudinary’s Product Gallery Widget

New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Newly on deck are several enhancements to the widget’s accessibility, capped with a more wholesome, convenience-filled experience. Below is a summary.

Benefits of Accessibility

A core mission of Cloudinary is to deliver a fast, riveting web experience regardless of device, browser, or network speed. Gratifyingly, the barrier to accessing the internet on various devices is being lowered continually. Those devices have also become more robust with helpful features, which opens more access to the disabled.

By improving the accessibility of its Product Gallery widget, Cloudinary fulfills the needs of disabled visitors to e-commerce sites, affording those individuals an enjoyable shopping experience and helping grow retail revenue. Two examples:

  • A significant number of physically handicapped people cannot use a mouse device, relying exclusively on their keyboard instead.

  • The visually impaired must turn to assistive technology in order to access content. For those individuals, Cloudinary’s Product Gallery now enables keyboard accessibility, offers screen readers that support alt text, and features multiple zoom-in levels.

New Enhancements

The tutorial video below walks you through the accessibility-related enhancements for Cloudinary’s Product Gallery widget, followed by a summary of each of them.

Keyboard Accessibility

The accessibility layer, which is part of the basic configuration, supports these standard keyboard navigations:

  • Tab to navigate forward
  • Shift+Tab to navigate back
  • Enter to view or zoom in to an asset
  • Esc to stop zooming in
  • Spacebar to toggle between playing and pausing a video

The enhancements are tailored for users who must rely on the keyboard for navigation due to an inability to use a mouse device; and for the visually impaired, who decipher text by listening to a screen reader. We recommend the following configurations:

  • Classic view or multiple columns in an expanded view, the latter delivering a more prominent focus
  • With or without thumbnails
  • Zooming as a pop-up
  • Images and videos
  • Play and Pause as the only controls for video

Text Accessibility (Alt Text)

Subsequent to the widget’s June 2021 release, all Cloudinary product galleries feature alt text. By default, the widget adds a string to the alt text of each asset in the form of "Gallery asset n of m." Also, generation of alt text in the widget is now automatic, greatly enhancing accessibility for screen-reader users.

By way of background, alt text is an important feature for the following reasons:

  • In case an image fails to load, the related alt text is displayed.
  • Screen readers play the audio of alt text—a big help to the visually impaired.
  • Alt text raises your site’s search engine optimization (SEO) ranking by sending contextual image descriptions to search-engine crawlers. Indexing is easier for images with alt text. This feature goes hand in hand with the [keyboard accessibility](https://cloudinary.com/documentation/product_gallery#accessible_navigation enabled by the Product Gallery widget. That’s a tremendous boon for people with low vision and, concurrently, difficulties in seeing images and other digital elements.

We highly recommend that you populate alt text with contextual metadata. Alternatively, adopt a structured metadata key for your gallery assets. Make the wording clear and descriptive, especially since this text is also picked up by search engines, hence a key factor for SEO.

Note
Abide by this important tip on the length of alt text.

In addition, heed the following to ensure a captivating display:

  • Asset style (painting, photo, illustration, video, 360 view)
  • Placement of objects
  • Placement of text
  • Colors
  • Product material, textures, and styles
  • Food ingredients, flavors, and spices
  • Animals
  • Emotions, such as smiles
  • Surroundings

For more details, see the documentation.

Multilevel Zooming

The Product Gallery widget’s new multilevel capability for zooming offers, on demand, a detailed view of product images, displaying captivating specifics like fabric, stitches, fine lines, buckles, and gemstones.

With multilevel zooming, individuals with hampered vision, such as a restricted or distorted field of view, tunnel, or peripheral, can see your product gallery’s images clearly and interact with your site as desired.

The zooming pop-up offers several configurable levels, which are controlled through a click on the + or - buttons on desktop screens or a pinch on mobile devices. The simple configuration process includes options for the zooming factor and the number of zooming steps, as shown in this demo:

Note
For the best multiple-zooming experience, display high-resolution images capable of retaining the quality standard over a deep zooming.

Product Gallery in Action

Below are two demos on how to customize a product gallery with Cloudinary along with two live examples of well-designed and eye-catching galleries:

  • Customizable Product Gallery, a demo
  • Customizable Product Gallery with keyboard accessibility

Additional References

For the Cloudinary process through which to make your site fast and accessible, see this post.

For details on color accessibility, see this article.

We welcome suggestions on accessibility vis-a-vis the Cloudinary platform. Also, feel free to send us ideas on new features for our public roadmap.

Recent Blog Posts

Get Your Media Moving Faster with Cloudinary’s Media Optimizer

So, your boss comes to you in a panic: he's just heard about Google's Core Web Vitals initiative and needs you to optimize the company website right now! "No problem," you say, hiding your fear that it's not something that can be done overnight. Just taking the first metric, Largest Contentful Paint (LCP), how can you possibly identify all the large elements - most likely images or video posters - of the many hundreds of pages that make up your site? There are already thousands of high-resolution (read massive) media files stored away, which marketing could use any time. How are you going to make sure they're all compressed to a size small enough to be delivered within the threshold? Not to mention all the new images and videos that will be created over time...

Read more
How to Tap Into the Value of User-Generated Content (UGC)

User-generated content (UGC) took off with, first of all, the advent of the internet and, subsequently, social networks. Everyday consumers were given keys to the kingdom, so to speak, so that they, too, could compose and post content, simultaneously engaging with others online. Twitter, Facebook, Instagram, Snapchat, TikTok—the networks through which we can create and publish content have grown exponentially, and brands are becoming aware of the benefits of tapping into the gold mines offered by those networks.

Read more
Identifying Countries by IP Address in Columnar Databases Through SQL

Cloudinary reaps a myriad of open web traffic, from ad networks to e-commerce sites. Our Data Science team is dedicated to analyzing the data for use internally and externally.

A glance at any General Data Protection Regulation (GDPR) article would reveal that—unlike Android device IDs (AID), through which users can reset their web address—keeping user identifiers, such as Internal Protocol (IP) and Media Access Control (MAC) addresses, as well as International Mobile Equipment Identity (IMEI), violates privacy. As a solution, you can discard all privacy identifications or make them visible to users for reset.

Read more
Digital-First Asset Management Explained

As the world changes, so does technology. I don’t need to name more than a handful of antiquated technologies before you nod in agreement: floppy disks, Walkmans, phone booths, VHS tapes, each of which have been phased out or rendered useless by new solutions that meet the same need but much more effectively.

Read more
How to Build Workflows With Cloudinary’s MediaFlows

Many of you who work with the Cloudinary platform have a media-associated workflow for moderation of images, dispatch of notifications with certain data or headers, implementation of activities through add-ons, etc. For most of those cases, Cloudinary would suggest that you take advantage of our webhook notifications and build the workflow with an infrastructure like AWS Lambda. This post describes how to do that with Cloudinary’s MediaFlows a beta product that helps tackle management and operational tasks related to visual media.

Read more