The Art of Alt+Text: Mastering Alternative Descriptions for Images

In today’s digital world, accessibility is key to creating a user-friendly and inclusive experience for all users, including those with visual impairments or other disabilities.

Alt+Text, also known as “alternative text,” “alt attributes,” or “alt tags,” is a critical tool in the toolbox of web designers. It provides a textual alternative to non-text content, ensuring that images on a website or digital document are accessible to all, including those with disabilities.

Alternative descriptions are essential for websites, PDFs, and digital documents as they enable screen readers and other assistive technologies to convey the content of images to visually impaired users and those who rely on the additional information.

However, writing effective Alt+Text is an art form! It requires a deep understanding of the image context, the intended audience, and the content’s purpose.

In this article, we will explore what Alt+Text is, why it is crucial, and guide you through writing effective descriptions for various types of images.

What is Alt+Text, and Why is it Important?

Alt+Text, also known as alt attribute or alternate description, is a text description associated with an image on a web page or a digital document. This feature is recognized by assistive technology, like a screen reader, which converts the text into speech, making images accessible to visually impaired users.

Helps visually impaired users.

Screen reader software, used by people with visual impairments, reads this Alt+Text, making the content accessible to this audience. It empowers visually impaired users to understand the image’s content and purpose.

Support for speech input software.

Users who issue voice commands can now focus on a button or linked image with a single command, thereby improving their navigation efficiency.

SEO optimization

Alt+Text not only enhances accessibility but also improves the website’s SEO performance. Search engines like Google cannot understand images, but they can read Alt+Text, which helps index the image properly. Thus, a well-written Alt+Text can improve the website’s visibility on search engine results pages (SERPs).

Additionally, Alt+Text is useful in situations where images are unable to load due to a slow internet connection or incorrect image URLs. The Alt+Text provides information about the image, ensuring that users understand the content even if the image is not displayed.

Crafting Effective Alt+Text: General Guidelines

Writing Alt+Text is an art that requires a balance of concise yet descriptive language. Here are some general guidelines to assist in crafting effective Alt+Text:

1. Purpose and Relevance: Alt+Text should succinctly convey the image’s purpose or function. Avoid adding extraneous or redundant information.
2. Descriptive Yet Concise: The Alt+Text should accurately represent the image, conveying necessary information in a concise manner. However, avoid being overly descriptive. Aim for Alt+Text length to be around 125 characters as screen readers tend to cut off longer text.
3. Context Is Key: The Alt+Text should match the image’s context within the content. It should provide the same functionality or information as the image for sighted users.
4. Avoid Redundancy: If the image’s information is already provided in the surrounding text, repeating it in the Alt+Text is unnecessary. In such cases, a simple alt attribute with an empty text (alt=””) can be used.
5. Don’t Start with “Image of” or “Picture of”: Screen readers already announce the presence of an image, so starting with “image of” or “picture of” is redundant. Directly describe the image’s content or function.
6. Use Proper Punctuation: Correct punctuation aids screen readers in interpreting the Alt+Text. It helps to pause at appropriate places, making the Alt+Text easier to understand.
7. Include Text in Images: If an image contains text, ensure to include that text in the Alt+Text. This applies to logos, banners, and images of text.

Types of Images and Their Alt+Text Descriptions

Every image serves a purpose, and understanding this purpose is the first step in writing appropriate Alt+Text. The following sections delve into different types of images and provide guidance on writing their Alt+Text.

Informational Images

Informational images are typically photos, illustrations, or diagrams that provide information or context to the content. The Alt+Text should be a short description conveying the essential information the image presents.

Example: For an image showing a classic Corvette car on a road, the Alt+Text could be “A red 1978 Chevrolet Corvette driving on a countryside road at sunset.”

This is much more descriptive. In fact, I bet you can create a much better picture in your mind about what the image looks like.

Decorative Images

Decorative images serve no informational purpose and are used purely for design or aesthetic reasons. They do not contribute to the content’s meaning. In such cases, the alt attribute can be used with an empty text (alt=””).

Example: For a decorative border image, the Alt+Text could be left empty: alt=””

Decorative Images: incorrect uses

The thing about decorative images is that most people use them incorrectly. The best test for deciding if an image should be marked decorative or not is to ask yourself:

“If I removed the image from the page, would it take away anything for sighted users?”

If you answer yes, then it is NOT a decorative image. The image is mostly likely intended to convey a mood or help establish a feel for the page. In this case, it should do the same for those who are not sighted.

Complex Images

Complex images include charts, graphs, diagrams, or illustrations that contain substantial information. These images require detailed Alt+Text and/or a long description that explains the image’s content and provides the same information as the image.

Focus on what information all readers need to know. Don’t try and cram all data points into a description!

Example: For a bar graph showing sales over a year, the Alt+Text could be “A bar graph showing monthly sales for 2021, with sales peaking in December.”

Here are some ways to help provide more details for complex images:

• Include the details in the paragraph before or after the image. Then indicate that in the Alt+Text.
• Add the additional information in a caption below the image. This helps ALL readers since it is both visible to readers and read by assistive technology. The best of both worlds!
• Provide a long description attribute with the details. Note, that long descriptions are not visible on a page and are only available in HTML pages. Word docs and PDFs do not have them.

Images of Text

Images are sometimes used that have text within them. This is a common practice for logos and banners. If an image contains text, ensure that the same text is included in the Alt+Text.

Example: For a logo image containing the company’s name, the Alt+Text could be “The Accessiblü logo with the letters “accessi” in dark blue and the letters “blü” in a bright blue color on a white background.”

Functional Images

Functional images are used as interactive elements, such as buttons or links. The Alt+Text for functional images should describe the functionality of the image, not its visual appearance.

Example: For a print button represented by a printer icon, the Alt+Text could be “Print this page.”

Groups of Images

If multiple images convey a single piece of information, the Alt+Text for one image should convey the information for the entire group.

Example: For a comic strip with multiple panels, each panel should have Alt+Text describing its content, and the sequence should be maintained.

Difference Between Captions and Alt+Text

While both captions (below an image) and Alt+Text provide textual alternatives for images, they serve different purposes and are used in different contexts. Captions are visible to all users and provide additional information about the image, like the image source or a brief description.

On the other hand, Alt+Text is not visible on the page and is used specifically for screen readers to describe the image’s content and function.

If using captions and Alt+Text, we suggest doing one of the following:

1. Make the caption and description deliver different, relevant information.
2. Using the caption to deliver both the description and image attributes and marking the image as decorative.

Common Mistakes to Avoid

While writing Alt+Text seems straightforward, there are common pitfalls to avoid:

• Lengthy Alt+Text: While it’s essential to be descriptive, overly long Alt+Text can be tedious for users. Aim for brevity while conveying the necessary information.
• Missing the Point: Alt+Text should describe the image’s purpose within the content, not just its visual appearance.
• Ignoring Decorative Images: Even decorative images should have Alt+Text, although it’s usually an empty alt attribute (alt=””).
• Redundant Alt+Text: Avoid repeating information already present in the content.
• Using the File Name: Using the file name as a description is not a good practice.
• Duplicating the Caption: Avoid making the two the same. If both end up being the same, mark the image decorative.
• Stuffing in Keywords: Avoid stuffing keywords into Alt+Text descriptions as a way to improve SEO performance. This is a horrible way to improve your SEO since it makes your site less accessible at the expense of your disabled readers.

The importance of Alt+Text lies in its role in making digital content accessible to everyone, ensuring a seamless user experience regardless of disability. By keeping these guidelines in mind, you can create Alt+Text that makes your content accessible to all users, thus improving the overall user experience.

Don’t forget, Alt+Text is valuable for search engine optimization (SEO) as search engines utilize this text to index and rank images in search results. Remember, the goal is not just to describe the image but to convey the same information that the image provides to sighted users.

By carefully crafting Alt+Text, we can make our digital content more inclusive and accessible. It’s not just about compliance with accessibility standards like WCAG; it’s about ensuring everyone can engage with and benefit from our digital content, regardless of their abilities.

Remember, good Alt+Text is an art; like all art forms, it takes practice to perfect. So, keep practicing, refining, and making the web a better place for everyone!

For more information on writing great Alt+text, check out the W3C’s online Image Tutorial page.