What Is Alt-Text? And Why You HAVE To Use It Correctly

What is alt-text? Just what the hell is it? Nobody seems to know. It’s been around for ages, yet most people I know misuse it. And everyone gets away with it. And in the meantime, a specific group of people suffers every day. Yes, suffer. So, let’s make the world a better place by learning a few facts about the mysterious alt-text.

Read also: What Makes A Website Accessible — The Web Designer’s Perspective

What is alt-text?

Alternative text, is a description of an image. It’s primarily used for accessibility, to describe the image to a particular group of people can’t see. It’s also what any users will see if an image cannot be loaded. In short, it’s convenient, helping everyone, from people with no vision to search engines. 

It looks something like that:

<img src="guineapigcostume.gif" alt=“A guinea pig in a costume”>

Making use of it is simple and doesn’t take much time. Just type whatever you see on an image — or maybe describe its function. Don’t retype a filename, especially if it’s just a row of numbers, don’t just repeat the article name. 

And it’s important. WCAG mentions alt-text immediately as one of the most important accessibility features. 

How do I add alt-text?

Most websites use CMS that allows creating the alt-text when uploading images. It’s easy with WordPress, which we use. The field is usually called “Alt” or “alt-text.”

And when using background images that don’t actually serve any purpose except for decoration, you can leave the alt-text field empty.

What does it look like?

Admittedly, making a good alt-text is not an automated process. It’s not as easy as, say, coming up with a Title (who needs it anyway?). The good Alternative text changes depending on the type of website. If it’s a photo, mention who’s on it. If it’s a movie website, mention the actor’s name and prominent roles. Don’t mention the name of the photographer. It doesn’t help anyone. Don’t cram keywords in there, either.

Context is everything. If it’s a video game site, describe the screenshot. Don’t just say that it’s a screenshot with people fighting. Treat alt-text as a part of an article. But keep it short.