Making Accessibility Accessible: Create Alt Text with SceneXplain's API

Accessibility (or "a11y" for short) is fast becoming an important part of web development and e-commerce. Back in the day, accessibility aids like alt text or color-blind-friendly color schemes weren't seen as high priorities by developers and companies. But now, with accessibility legislation from Europe and the USA, making your website accessible is more important than ever before.

💡

Alt text, or alternative text, is a brief description of an image used on websites and in digital documents. It helps people who can't see the image understand what it's about. This includes people using screen readers because of visual impairments and those with slow internet connections where images don't load. Alt text is also useful for search engines to understand and index images.

But how can you go about creating alt text for every image on your website? Manually going through each image and writing alt text could take forever, especially if you have thousands (or millions) of images. And if more are being added every day, it becomes a never-ending battle.

That’s where SceneXplain comes in. It’s your a11y ally! You can simply upload an image and get alt text for it without having to wrack your brain thinking of the wording yourself.

If you have, say, a few dozen images, this is a good way to give your brain a break. But you still need to do all the clicking and dragging yourself. Your brain wins, but your fingers don't. And if you have a few thousand images? Call the doctor now to pre-book your carpal tunnel appointment.

If only there were a way you could automate the whole thing. Then your brain and fingers could both focus on more interesting things.

That's where SceneXplain's API comes in. You can write a script that will go through your thousands of images, send them in batches to SceneXplain, and generate a CSV file with the results (or with a bit more coding, integrate directly into your workflow.)

After all, you know what they say. You can't spell happiness without APIness.

💡

Upon further reflection, I have found that the English language does not, in fact, work like that.

tagWhat is an API?

But before we dive into the how, let's look at the what. The Oxford English Dictionary defines API as:

A white banner from Oxford English Dictionary with a welcoming message thanking visitors accompanied by instructions to sign in or purchase a subscription to continue reading. Central to the banner is a blue button prompting users to "View our subscription options." — Well, that’s not useful at all

However, everyone's favorite AI, GPT-4 defines an API as:

An API, or Application Programming Interface, is a set of rules and protocols for building and interacting with software applications. It defines the methods and data formats that applications can use to communicate with each other. APIs are used to enable the integration of different software systems, allowing them to exchange data and functionality efficiently. In other words, An API is like a waiter in a restaurant. Just as a waiter takes your order and brings you food from the kitchen, an API takes requests from one software and gets information or performs actions in another software. This helps different software programs talk to each other and work together.

Or, if you prefer a video explanation:

In short, you can write a Python (or any other language) program to talk to SceneXplain via its API and automate your whole alt-tagging process. We have a Python snippet that does just that.

💡

Can’t run the code on your own computer? Keep reading down to the Google Colab notebook which lets you use it in your browser.

Here’s how you use it:

Install the requests library:

pip install requests

Go to SceneXplain’s API page to generate a secret key and copy it to your clipboard.
Paste it into the Python code below.
Copy an image URL into the code where it says .....
Run the code!

import requests
import json

# generate token on SceneXplain's API page
YOUR_GENERATED_SECRET = "your_generated_secret_here"

data = {
  "data": [
    {
      "task_id": "alt_text",
      "languages": [
        "en"
      ],
      "image": "..." # change to image URL
    }
  ]
}

headers = {
  "x-api-key": f"token {YOUR_GENERATED_SECRET}",
  "content-type": "application/json",
}

response = requests.post("https://api.scenex.jina.ai/v1/describe", headers=headers, json=data)
print(response.json())

(We’ll put in more code snippets later for cURL and JavaScript)

tagAPI in action: SceneXplain in a Notebook

Since we want to see this in action, we’ll use the code live in a notebook. That lets you see what’s happening in real time with real data, and lets you examine and play with the Python code yourself.

The notebook goes beyond just the simple Python snippet above. It also downloads a sample dataset and exports the results to a CSV file.

tagBeyond the notebook: Using the API IRL

Of course, you’re not limited to Python when you use SceneXplain’s API. Any language that has an HTTP library should work fine.

Here’s that same code snippet from above, this time in JavaScript:

const body = {
  "data": [
    {
      "task_id": "alt_text",
      "languages": [
        "en"
      ],
      "image": "..."
    }
  ]
};

const YOUR_GENERATED_SECRET = 'your_generated_secret_here';

fetch('https://api.scenex.jina.ai/v1/describe', {
  headers: {
    'x-api-key': `token ${YOUR_GENERATED_SECRET}`,
    'content-type': 'application/json'
  },
  body: JSON.stringify(body),
  method: 'POST'
}).then(async (resp) => {
  if (resp.ok) {
    const data = await resp.json();
    console.log(data);
  }
});

And this time as a cURL command:

curl "https://api.scenex.jina.ai/v1/describe" \
  -H "x-api-key: token $YOUR_GENERATED_SECRET" \
  -H "content-type: application/json" \
  --data '{
  "data": [
    {
      "task_id": "alt_text",
      "languages": [
        "en"
      ],
      "image": "..."
    }
  ]
}'

tagImprove your image accessibility with SceneXplain’s API

To get started, head over to SceneXplain’s API page to brush up on how it all works, generate a secret key, and then either adapt our notebook or create your own code to start improving accessibility today!