Give Your Images a Voice with Proper Alt Text

From icons and logos to illustrations and photos, visual content is an integral part of our internet experience. It’s out of the question that it must not only be pleasant and useful but also accessible to everyone, including visually impaired people. To achieve that, you must pair your visual content with alternative text description, or simply alt text, to provide the content and context of an image in textual form.

In this article, we’ll talk about alt text and why it matters for your content, look into good and bad examples of it, and share some tips on writing correct alt text.

What Is an Alt Text, and Why Must It Be Used?

As said above, alt text, or alt attribute, is a textual alternative for images. It is used to provide additional information about the image and for accessibility purposes.

There are several reasons to use alt text to create a more inclusive experience for all your website visitors.

• Accessibility. Screen readers used by visually impaired users need the alt text to describe the image and its contents. Without alt text, these users would have no idea what the image is about.
• SEO. For many people, the visual answers Google Images provides through screenshots and illustrations are faster and easier to understand than written instructions for these users. That’s why you have to be sure that in search of answers, they will find the right images of your product.
• Usability. If an image fails to load for any reason, the alt text provides a textual alternative so the content still makes sense.
• Standards compliance. Using alt text for images is a requirement according to the WCAG accessibility guidelines and HTML standards.
• Alternative on mobile. On mobile phones, images are often hidden by default to save data and battery. The alt text provides a textual description that can be shown instead of the image.

So, in summary, alt text provides a text-based description of an image so that it can be properly interpreted by screen readers, search engines, and users when the image fails to load.

When to Use Alt Text?

• All non-decorative images. If an image contains important information or is meant to be seen by users, it needs alt text.
• Logos. Include a short description that identifies the company or product.
• Images used as buttons or form controls. Describe the action that will happen when clicked.

To summarise, use alt text for any image that contains useful information or performs an action that a user needs to understand. Logos, buttons, form controls, and information images all require alt text.

When Not to Use Alt Text?

• Purely decorative images, like background images. If an image only serves an aesthetic purpose and does not convey meaningful information, it does not require an alt attribute. In this case, using alt=”” is a good practice.
• Non-public images. Images that are not actually viewed by users, like tracking pixels, don’t convey information, so they don’t require alt text.
• Images with text alternatives. If the image provides the same information as the surrounding text or other content on the page, alt text might not be necessary.
• Images that would not make sense with alt text. If an image contains information that cannot be accurately described with text alone, omitting the alt attribute might be appropriate.

In short, alt text is only needed for images that serve an informational purpose and provide meaningful content to users. If an image does not actually add information or does not make sense as text, it does not require alt text. Though, you might use alt=”” for decorative images anyway.

How to Add Alt Text in ClickHelp?

In ClickHelp, you can allow the content of your portal to be indexed by search engines. That’s why we made it possible to specify additional parameters, such as alt text, for your images.

Just click the Insert Image option in topic editor, select the necessary image, and click the Image Properties icon at the bottom of the screen. On the Common Setting tab, you can change the image’s Size, Position and add a Description.

To learn more about ClickHelp features, simply request a demo.

Tips for Writing Good Alt Texts

Before we start how to write a good alt text, let’s first look at the examples of good and bad ones. See this picture?

A good alt text for this photo would look like this:

img alt="A black dog and a golden dog resting on the beach" src="dogs.jpg"

Why is it good? Because it’s clear and concise and definitely reflects the image content.

A bad alt text example would be:

img alt="cute dogs playing on the beach" src="dogs.jpg"

Why is it bad? It uses subjective or generic terms like “cute” or “dogs” and doesn’t reflect the actual content: the dogs are not playing, they are resting.

So, basically, the main rules for making your alt text perfect are:

• Don’t use generic or subjective terms. Keep your description simple, factual, and objective.
• Keep alt text descriptive, but concise. 50-150 characters are enough usually.
• Reflect the image content and show its value.

But we’d like to add some tips we use ourselves:

• Identify the most important parts of the image first and base alt text on it.
• Use keywords that match the surrounding text and page content, but don’t keyword-pack your alt text.
• Mention things like actions, objects, people, and locations.
• Explain images out of context. The alt text should make sense on its own.
• Read your description aloud to check if it sounds good: screen readers will vocalize it.

Conclusion

Alt text serves an important purpose by making visual content accessible and discoverable for everyone. Paired with well-written and useful alt text, your images will truly enhance the experience for all types of users. So take the time to craft descriptive yet compact alt texts that truly represent the value of your images.

Good luck with your technical writing!
ClickHelp Team
Author, host and deliver documentation across platforms and devices