Putting Our Alt Text Best Practices to the Test

At AudioEye, we’ve covered image alternative text (or alt text) from just about every angle — from the most common accessibility mistakes to the perspectives of screen reader users.

One thing we haven’t done is put our alt text best practices (and writing skills) to the test. So we decided to change that by having members of our marketing team write a description for the same image.

Then we plugged each description into DALL·E — an AI tool that can turn natural language descriptions (like alt text) into images — to see how close each person got to the original image.

Our goal was to see how each person applied the best practices of alt text — and determine whether more or less detail delivered the best result.

Here’s what happened:

Team Activity: Writing Alt Text

To start, we entered the following description into DALL·E to generate our image: A painting of a leopard in a tuxedo playing the flute, in the style of impressionism.

That returned this image:

Then, we each wrote a description of the image, keeping in mind a simple best practice for writing alt text:

Pretend you’re describing an image to your friend over the phone. What are the key details they need to know in order to understand the image?

(To keep things fair, I was the only one who knew the description used to generate the image.)

So how’d we do? For the most part, everyone got pretty close to the original image. In fact, most of the variance between descriptions had to do with the type of cat (half of the team thought it was a leopard, and the other half thought it was a cheetah) and what it was doing (“playing an instrument” and “smoking a cigarette” were popular choices).

Otherwise, we were all aligned on the most important details to include:

• Everyone mentioned the leopard’s tuxedo and top hat, which are obviously central to the image.
  
• We all noted that it was a painting, and several of us tried to find ways to describe the style of the painting (“Impressionist”) or the look and feel of its brush strokes (“Oil,” “Pastel,” “Semi-Blurry”).
  
• Several people included details about the leopard’s surroundings, either by noting the stage or the fact that the background of the painting was yellow.

Breaking Down Each Description

The biggest difference between each description — and the resulting images — was its level of detail. Here’s a representative sample, ordered from least to most detail:

1. A painting of a leopard wearing a tuxedo and top hat playing the flute.
2. Oil canvas painting showing an artsy leopard on stage in a black and white tailcoat and top hat with a pipe instrument.
3. A pastel drawing of a leopard standing upright on a stage with a light orange curtain in the background. It is wearing a black morning suit with a bow-tie, white vest and shirt, and a small black top hat. The cat is playing the flute.

As you can see, alt text is subjective. Different people can look at the same image and come away with their own idea of what to include.

Which Descriptions Worked … and Which Ones Needed More Detail?

When I wrote my description, I intentionally left out a lot of detail. I wanted a baseline for what would happen if someone neglected to add key information.

Here was the description and the resulting image:

• A painting of a leopard wearing a tuxedo and top hat playing the flute.

Without any direction on color or setting, DALL·E was forced to fill in the blanks — with mixed results.

And while this might not seem like a big deal for an AI-generated painting, imagine if the product photos on an e-commerce website had equally sparse descriptions.

If a screen reader user wanted to buy a sweatshirt, there are plenty of details they’d want to know. What is the texture of the fabric? Are there any patterns? What about color and fit? Is the sweatshirt baggy, or tapered through the waist? All of these details are clear to someone viewing an image — and they need to be equally clear to anyone reading the alt text description.

Fortunately, other members of the team keyed in on some of those details — and the accuracy of their images showed the value of being descriptive:

• Painting of a cheetah wearing a tuxedo and top hat, while playing a flute, displayed in warm yellow tones.
• Impressionist painting of a cheetah standing upright as if human, wearing a black tuxedo, white blouse and black top hat, shredding the flute.

Crowdsourcing the Ultimate Alt Text Description

Once we finished the initial round, we decided to reverse-engineer alt text that took the best pieces of each description. Think of it as our own Frankenstein’s monster, with (hopefully) less-terrifying results:

An oil painting of a yellow leopard standing on a stage, playing the flute. The leopard is wearing a black top hat and black tuxedo. The painting has a warm yellow hue, with soft, slightly blurred brush strokes.

What was our thinking behind this description?

• Provide more detail on the painting itself, focusing on the actual attributes (oil painting, blurred brushstrokes) vs describing the style of painting, which may be less familiar to people.
• Nail the color palette by providing clarity on both the leopard and the overall color of the painting.
• Keep all of the core information (the animal type, what they’re wearing and doing)

And the final result?

Not half bad, although we should have maybe reminded DALL·E that leopards have paws.

Want More Tips On Accessible Design?

Check out our Ultimate Guide to Accessible Web Design, where we cover everything from alt text to information architecture.