Alt writing
This was originally posted on my own site.
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.
This was originally posted on my own site.
