Write Alternative Text for Your Content

Why do you want to write alternative text?

You write alternative text to provide an alternative way for your users to understand essential graphics. I often read the alternative text when I can not comprehend an image. Some websites, like Mastodon, are kind enough to allow seeing the alternative text with the image.

Alternative text also offers an insight into what the author wants to highlight from an image. Sometimes, I fail to understand an image, and alternative text helps me. But it only helps if you write good alternative text.

How do you write great alternative text?

Write alternative text for content graphics. Those graphics are part of the content, and without them, your users will lose information. Thus, when those graphics fail to load, alternative text will be visible as an alternative way to understand the graphic. For example, you post an image of your keyboard. You write the following for your post:

Hey, folks! I have just bought a new keyboard. It's so cool.

Then, you need to write alternative text explaining the keyboard. Otherwise, if the image fails to load, your followers will not know that you are buying an RGB keyboard. If that is me, I will just write "An RGB keyboard with black color." Since I am not an expert at the keyboard, I can not add more description. But if you know a lot about the keyboard, you may add more explanation about it based on this context.

Make sure that your alternative text is not too long. You want to provide comparable info when writing alternative text. This means you do not write an essay about your new keyboard inside the alt attribute, explaining all the great features of it. Instead, you ask yourself, "What do I want people to know from the image?" To answer the question, consider the context.

You should not use words like "image," "icon," "graphic," "picture," and any similar words that tell the image is an image. The HTML image element (<img>) already has the semantic meaning to tell the users that an image is an image. You do not need to repeat such info in the alternative. But I can think of an exception. If the alternative text is about a person holding a photo, your alternative text can be the following: a young boy smiling and holding a photo of his family. The word "photo" is okay in such cases. Shortly, be smart and do not repeat information.

For social media icons, the alternative text should be just the name of the social media. If you want to use a Facebook icon and link your Facebook account, you had better delete your Facebook account. That is not what I mean. You only need to write "Facebook" as your alternative text. The same as when you write a link text on a footer. You do not need to write "Visit my Facebook." People know that when you put a link, you want them to visit that. Do not repeat that info again. Treat your users with respect. They are not so stupid.

Writing great alternative text takes practice. You will make mistakes. I was also bad at writing alternative text. Now I am still learning to get better. We need to be patient and keep learning. I learn about alternative text by reading alternative text from a working website. Learn from both bad and good alternative text.

What is the most stupid way to write alternative text?

Alternative text must not be phrases that

• tells the image fails to load; or
• shows the name of the file.

You must not do those things. Hide your stupidity.

Use your common sense.

Always remember the following, folks:

Every image should have an alt attribute, even if it's alt="" (sometimes called "null" alternative text).

—web accessibility in mind (WebAIM)