an opinionated guide to alt text

nowadays, just about every website lets you add "alt text" to images. and seemingly because of that, a lot of people seem to like to get mad about alt text, especially in the ways that people use it. but what is alt text anyways, and why is it so important?

in HTML, elements have attributes, which specify additional data. for images, the alt attribute — short for "alternate" — contains text that can replace the image if it cannot be viewed for any reason. this includes not just people with impaired vision, but also if there's any sort of technical fault that makes the image unable to load. how many times have you waited for an image to load out of curiosity, only to find out it just wasted your time?

it's also worth noting that alt text is not the same as title text. title text is what is displayed when you hover your mouse over an element. title text can be added to any element — at least if you're writing your own website — and doesn't have much importance for accessibility when it comes to images, because that's what the alt text is for.

however, many social media platforms simply copy the alt text to the title attribute as well; which is fine to do, as long as you write good alt text in the first place. title text does not make a substitute for alt text though, especially because it is not always viewable by everyone; not every device has a mouse cursor to hover.

so… how do we do that then?

the purpose of alt text is to provide a replacement for the image. so to replace an image, you have to ask yourself, why did you add that image in the first place? in other words, you have to consider the semantic purpose of the image. it's tempting to just describe everything in the image; but most of the time, a lot of that is just background noise, which will do nothing but confuse people if you describe it.

for example, here is a picture of my brother's cat:

while there are many details in this image — the names of the books, the various tchotchkes that adorn the shelves next to them, or the gold glittering sequined pillow, just to name a few — most of them don't matter for the purpose of showing you my what my brother's cat looks like. what matters is that she's a tabby cat standing on a chair in front of a bookshelf. and so, it only makes sense to give this picture the alt text of "a tabby cat standing on a chair in front of a bookshelf".

another example of images which can be hard to caption are memes. memes frequently contain lots of extraneous things, that only remain because someone forgot to edit them out when they changed the joke.

it can be tempting to explain every single one of these elements, but frankly, doing so can ruin the joke. don't explain the joke! just allow people who can't see the image itself to get the joke too. in the same way, don't bother explaining every detail of a meme format, especially if it's a common one; nobody cares about the color of Drake's jacket.

…okay, maybe that last one was a bit too meta.