Cloudinary Blog

m16y: Make Your Cloudinary Images More Accessible

Make Your Cloudinary Images More Accessible

Using alternative text (alt text) in HTML has long been a common SEO best practice, which also works well for accessibility. This post shows you how to programmatically generate, save, and use alt text for your images on Cloudinary.


Benefits of Alt Text for Images

According to Moz, alt text is “used within HTML code to describe the appearance and function of an image on a page.” Alt text serves three purposes:

  • It enables accessibility, that is, helps visually impaired users understand the content.
  • It serves as a placeholder in case the related images are not accessible.
  • It helps search-engine crawlers index content by providing context.

Ideally, you should tag all your images with alt text. Even if you don’t do that, the rule of thumb is that if an image is relevant to the content, add alt text to the image.

For example, you could skip alt text for decorative images. However, if they fail to load, your viewers will have no clues of what they are missing. Hence, for better user experience, make alt text for images a universal practice.


Sign up for Cloudinary free today!


Alt Text and Cloudinary

When you upload an image to Cloudinary, we assign it a metadata field called Context Metadata. Within this field is a placeholder for the alt text, which is displayed on a mouse-over or a click of the image for a preview.

context metadata

Alternatively, if you have structured metadata enabled, you can access the alt text by following these steps:

  1. Choose an image and then click the spanner icon for the settings.
  2. Click the Transform button on the top-right corner.
  3. Click the Edit metadata link. The context details for the image are then displayed, as in the example below:

tag

Later in this post, you’ll learn how to tag images with alt text by making use of the alt field shown above.

Setup and Retrieval of Alt Text With API

To set alt context metadata, set up the context method. For example, on Python, type:

result = cloudinary.uploader.add_context(context, public_ids, **options)

Next, retrieve the tag with Cloudinary’s “Get details of single resource” API. In Python, the code looks like this:

cloudinary.api.resource(public_id, **options)

Look for the field context->custom->alt in the JSON response. This partial response is an example:

Copy to clipboard
{
  "public_id": "wvpbmcdyuxdcktgaqwgz",
  "format": "jpg",
  "version": 1575658469,
  "resource_type": "image",
  ...
  "tags": [
    "bird",
    "brown pelican",
    "pelican"
  ],
  "context": {
    "custom": {
      "alt": "pelican perched on wooden dock during daytime"
    }
  }..
}

Generation of Alt Text

Now comes the million-dollar question: how do you generate the alt text at scale? An earlier blog post titled Making Media Accessible: How to Automatically Generate alt Text for Images has the answer. To interpret images, use a third-party API offered by CloudSight.

Generation and Tagging of Images

While uploading images to Cloudinary, you can specify a webhook notification URL. Take advantage of that capability for tagging. The diagram below illustrates the process.

diagram

Note that https://api.cloudsight.ai/v1/images is the endpoint for tagging images here.

Fetching of Generated alt Tags

Once an alt tag has been generated, you can fetch it with Cloudinary’s single- resource API. However, that API is rate limited and the usage limits vary according to your Cloudinary plan.

As an alternative, set up a Cloudflare Worker as your proxy. By proxying the call through that Worker, you can cache the response in a Cloudflare Workers KV, which you can then leverage at scale without incurring API rate-limits.

In this workflow, when you request the tag information for an image, the Cloudflare Worker checks the KV database. If it finds no entry there, the Worker fetches the details from Cloudinary and returns and caches them in the KV store, serving all subsequent requests from there. Caching is necessary to avoid hitting the rate limits in the underlying Cloudinary API call.

See the diagram below for the process.

diagram

Sample Requests

Below are two sample requests.

Cache Miss on KV Store

When you request the alt text for an image for the first time, it’s not in the KV store, as indicated in the example response below:

Copy to clipboard
curl -s "https://testfetch.cloudinary.workers.dev" -d '{"cloudName": "<cloud-name>","publicId": "some-image", "apiKey": "NNNNNN", "apiSecret": "XXXX"}' -H "Content-Type: application/json" | jq

{
  "alt_text": "pelican perched on wooden dock during daytime",
  "source": "API call"
}

Cache Hit on KV Store

If an image’s alt text is present in the KV store, the Cloudfare Worker returns the response, incurring no API cost. The request format is the same as the preceding example. The response looks like this:

Copy to clipboard
{
  "alt_text": "pelican perched on wooden dock during daytime",
  "source": "KV Store"
}

Deletion of KV Store Entries

Currently, Cloudflare Workers cannot delete entries. However, you can do that by resetting the cache-expiration time to zero (0) with this syntax:

Copy to clipboard
YOUR_KEY_NAMESPACE.put(publicId, tagWord, { expirationTtl: 0 })

The key is then deleted from the store.

Are you ready to make your images accessible? Do give Cloudinary a try for free. Here is the sample code for building the solution described in this post. Looking forward to see what you build!

About Cloudinary

Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.

For more information, visit www.cloudinary.com or follow us on Twitter

Recent Blog Posts

Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more
Readying Live Streams for Video on Demand

When planning a live broadcast or stream, companies often overlook the redistribution phase, but live-stream videos are useful well beyond their initial streaming. Why? Because not everyone watches the first run. For a wider audience, it makes sense to repost live content on your website under an “events” tab, on YouTube, and other social sites for video on demand (VOD). However, preparing footage for reposting can be a lot of work.

Read more
Optimize Visual Media for a Fast and Captivating Digital Experience

Did you know that humans process imagery 60,000 times faster than text? In fact, 90% of the information our brains process is visual, which makes it seem a no-brainer—pun intended—that brands are connecting with consumers through visual content online. However, adding media assets like images and videos to websites comes with a tradeoff: the more media, the heavier the site, which results in a noticeable slowdown in page loads and a reduction in content quality.

Read more