Alt text is writing
An SEO audit last month flagged a practice’s site for images with no alt text. By the time it got to me somebody had already filled in every one, so I ran the site through an accessibility checker to see what it thought. It found ~340 images and every single one had an alt attribute. No errors on that check so we’re good, right?
Then I read them.
They said alt="image", alt="photo", alt="IMG_2214", and alt="banner". A few dozen of them were the practice’s name verbatim. And one in the before-and-after gallery said alt="alt text here".
The checker can only count
I hadn’t understood this part until recently. An automated check can tell you the attribute is present, but it can’t tell you the attribute is any good and no tool ever will. To do that it would have to answer “what is this picture for,” and that’s a property of the page the image is sitting in, not of the image.
So the audit was measuring the one thing that was easy to measure. The practice got a perfect score on it and the site was no more usable than it had been the day before.
I’d been doing the same thing, just more neatly. I had “alt text is for blind people” filed as a fact somewhere early on in my journey and I’d never gone any further with it. Which meant I filled in the attribute the way you fill out a form, correctly and dutifully and without any thought about who reads it.
The same image, three different alts
Alt text isn’t a description of the image. It’s a description of the image’s job on this page, and that’s what made it click for me. The same file on a different page gets a different alt and sometimes no alt at all.
<!-- team page: their name is in the heading right next to it -->
<img src="alex.jpg" alt="">
<!-- speaker list: the photo is the only thing telling them apart -->
<img src="alex.jpg" alt="Alex">
<!-- write-up of the talk where what they're doing is the whole point -->
<img src="alex.jpg" alt="Alex on stage, pointing at a slide of a flowchart">The first one looks like a mistake and it’s the one I’ve gotten pushback on. But if the name is in an <h3> two inches away then putting the name in the alt as well means a screenreader user hears it twice for no reason. You’ve made the page worse in the name of doing accessibility.
So the question is what the image is doing instead of what it looks like. Which is a judgment about the page made by someone who understands why that photograph is there. That judgment is most of the point.
Empty is fine, missing is not
An empty alt and a missing one are worth separating out because the difference is two characters and the outcomes are opposite.
I’d assumed for years that omitting it was the polite version of not knowing. It isn’t. Leave the attribute off and a lot of screenreaders fall back to reading out the filename, so it’s the loudest possible way of not knowing.
Bad alt text
I keep finding the same few patterns.
The first is keyword stuffing. Somebody has read that alt text counts for SEO, so the photo of the waiting room is alt="cosmetic dentist Temecula dental implants Temecula best dentist Temecula".
This is the one I have a hard time excusing because nobody does it out of ignorance. It’s a decision to take a feature that exists for one group of people and spend it on something else. The cost lands entirely on that group. I don’t think anyone doing it has pictured a person listening to it.
Length is another. Alt text is read aloud in a linear stream and you can’t skim it. If your alt is a paragraph, you’ve built a trap that a sighted reader can glance past in half a second and a screenreader user has to sit through.
My rough rule is a sentence, maybe two. If it needs more than that then the information is too important to hide in an attribute. It belongs in a caption or in the prose where everybody gets it, which is nearly always the better page anyway.
Then there’s saying “image of.” The screenreader already announces that it’s a graphic so alt="Image of a dog" comes out as image, twice. Just describe the dang dog.
Charts are the one I’m worst at. alt="Sales chart" is useless, and a chart is hard because the data is the content and the picture is just one rendering of it.
I’ve landed on a rule. If the chart is worth including, its finding is worth writing down: sales grew in every region except the northeast. Put that in the paragraph and put the numbers in a table if they matter. The alt then only has to say what kind of picture it is.
The last one is logos that are links. The logo in the header is usually wrapped in a link to the homepage, which makes the alt the accessible name of that link. So the alt is where the link goes. It isn’t “logo” and it certainly isn’t the tagline.
Let the writers write
The actual argument took me the whole audit to figure out.
On most sites, alt text is written by whoever is in the CMS when the image goes in. A lot of the time that’s me at 6 pm with no idea why that particular photograph was chosen or what it’s supposed to be doing. I’m easily the worst person to be writing it.
Whoever picked the image knows what it’s for. Whoever wrote the paragraph sitting next to it knows what the section is arguing. I’m just the one who happens to be in the CMS at the time.
So I’ve started suggesting that we move it. Put a column labeled “alt text” in the same document the headings and body copy live in and have it filled in by the same person who fills in everything else. My guess is that somebody who already knows why the photo is there would write it better than I ever have.
It would also get reviewed because everything else in that document gets reviewed. Nobody has ever reviewed my alt text (or anyone’s, as far as I can tell), which is a strange thing to be true of copy that goes out on every page.
Clients, amiright?
You can fix every image on a site today and lose it with the next upload because images go into the CMS forever and you’re not always the one putting them there.
And the CMS isn’t helping. The media library in WordPress gives you four boxes: title, caption, alt text, and description. Three of them are lightly documented and one of them is prefilled with the filename.
I’ve seen a perfectly capable person write a careful sentence into the wrong box. If the field is optional it’s empty and if it’s required it says “image.” Both of those are the interface working as designed.
The best idea I’ve got is small. Relabel the field as a question, “What does this picture say? If it’s just decoration, leave this blank,” and put one line of help text underneath. I’d bet on that over any amount of explaining, which is either a nice lesson about interface design or a slightly depressing one about explaining.
I think this is a whole post of its own, actually. There’s a category of thing where the work gets done right once and then an upload field undoes it, and images are only the most obvious case.
Zero errors
Over 300 images with their accompanying alt attributes, no errors, and a page that reads out as “image, image, banner, IMG-underscore-2-2-1-4.”
It’s not an SEO task and it’s not really a development task. It’s a few words of copy per page, written by someone who knows what the picture is doing there. I think it’s bad everywhere because we keep filing it under the wrong job title.
Go and read yours. I don’t mean run a checker over them, I mean read them. It takes 10 minutes and I’d put money on at least one of them saying “banner.”