Tags: descriptions

Write Alt Text Like You’re Talking To A Friend – Cloud Four

This is good advice:

Write alternative text as if you’re describing the image to a friend.

I made the website for this year’s UX London by hand.

Well, that’s not entirely true. There’s exactly one build tool involved. I’m using Sergey to include global elements—the header and footer—something that’s still not possible in HTML.

So it’s minium viable static site generation rather than actual static files. It’s still very hands-on though and I enjoy that a lot; editing HTML and CSS directly without intermediary tools.

When I update the site, it’s usually to add a new speaker to the line-up (well, not any more now that the line up is complete). That involves marking up their bio and talk description. I also create a couple of different sized versions of their headshot to use with srcset. And of course I write an alt attribute to accompany that image.

By the way, Jake has an excellent article on writing alt text that uses the specific example of a conference site. It raises some very thought-provoking questions.

I enjoy writing alt text. I recently described how I updated my posting interface here on my own site to put a textarea for alt text front and centre for my notes with photos. Since then I’ve been enjoying the creative challenge of writing useful—but also evocative—alt text.

Some recent examples:

• Time to go play some songs with @SalterCane.

  A close-up of a microphone in a practice room. In the background, a guitar player tunes up and a bass player waits to start.

• Brighton in the sun.

  People sitting around in the dappled sunshine on the green grass in a park with the distinctive Indian-inspired architecture of the Brighton Pavilion in the background, all under a clear blue sky.

• Duck leg on white beans with sage, garlic, rosemary and olives.

  Looking down on the crispy browned duck leg contrasting with the white beans, all with pieces of green fried herbs scattered throughout.

But when I was writing the alt text for the headshots on the UX London site, I started to feel a little disheartened. The more speakers were added to the line-up, the more I felt like I was repeating myself with the alt text. After a while they all seemed to be some variation on “This person looking at the camera, smiling” with maybe some detail on their hair or clothing.

• Videha Sharma

  The beaming bearded face of Videha standing in front of the beautiful landscape of a riverbank.

• Candi Williams

  Candi working on her laptop, looking at the camera with a smile.

• Emma Parnell

  Emma smiling against a yellow background. She’s wearing glasses and has long straight hair.

• John Bevan

  A monochrome portrait of John with a wry smile on his face, wearing a black turtleneck in the clichéd design tradition.

• Laura Yarrow

  Laura smiling, wearing a chartreuse coloured top.

• Adekunle Oduye

  A profile shot of Adekunle wearing a jacket and baseball cap standing outside.

The more speakers were added to the line-up, the harder I found it not to repeat myself. I wondered if this was all going to sound very same-y to anyone hearing them read aloud.

But then I realised, “Wait …these are kind of same-y images.”

By the very nature of the images—headshots of speakers—there wasn’t ever going to be that much visual variation. The experience of a sighted person looking at a page full of speakers is that after a while the images kind of blend together. So if the alt text also starts to sound a bit repetitive after a while, maybe that’s not such a bad thing. A screen reader user would be getting an equivalent experience.

That doesn’t mean it’s okay to have the same alt text for each image—they are all still different. But after I had that realisation I stopped being too hard on myself if I couldn’t come up with a completely new and original way to write the alt text.

And, I remind myself, writing alt text is like any other kind of writing. The more you do it, the better you get.