Importance of Alt Texts and Writing Effective Accessibility Descriptions for Images

What is alternative (alt) text

Imagine a world where images speak to you even if you can't see them. That's the power of alternative text.

Also known as alt text or alt tags, alternative text is a descriptive text attribute that can be added to HTML code to provide a textual alternative for images on web pages.

Benefits of alt text

Accessibility

Alternative text is crucial for web accessibility. By adding a sprinkle of words that vividly describe the images, we allow screen readers to paint a picture in the minds of those who are blind or have low vision. This ensures that everyone, including those with disabilities, can understand the content and context of the images on the webpage.

For example, the text alternative for images can be read aloud or transformed into Braille, enabling individuals relying on screen readers to access the information.

But accessibility doesn't stop there. It's a bridge that connects people with cognitive or learning disabilities to the wonders of visual content. With clear and informative alt text, we provide a roadmap to understanding, making complex ideas and concepts accessible to all.

Search Engine Optimization (SEO)

Search engines rely on alternative text to understand and index images on a website. Properly optimized alt text can improve your website's search engine rankings and increase organic traffic.

User Experience

When images fail to load properly or take longer to load, the alternative text can act as a placeholder, providing users with valuable information about the image's content until it appears. This enhances the overall user experience and reduces frustration.

Content Comprehension

Alt text provides context and descriptions of images that may enhance the overall understanding of the content on the page, especially when images are used to convey important information.

However, not all images require alt text. Read further to learn more about that!

The types of images used on the web

According to the Web Content Accessibility Guidelines (WCAG), images can be categorized into the following types: informative, functional, decorative, complex, groups, images of text, and image maps.

It is important to consider the type of image when providing alt text and to ensure that the alt text accurately reflects the purpose and content of the image. This allows individuals who use assistive technologies to understand and access the information conveyed by the images on a website or digital content.

Let's examine each type in more detail.

Functional images

Functional images are like buttons or icons that serve a specific purpose or perform an action. They are interactive elements that users can click on or interact with. Examples include buttons for submitting forms or icons for sharing on social media.

These images need descriptive alt text that explains what will happen when they are activated. This helps users with disabilities navigate and interact with the functionality of the website.

We use functional image in our header, where logo serves as a clickable link that directs users back to the homepage. In this case our alt text on the logo is "Logo link to the JUNE KARLOVE homepage".

Decorative images

Decorative images are like beautiful ornaments that add visual appeal to a web page but don't provide important information. They are there to make things look nice and don't contribute much to the meaning of the content.

In such cases, it is recommended to provide an empty or null alt text attribute (alt="") for these decorative images. This informs assistive technologies that the image is purely decorative and can be ignored, allowing users to focus on the meaningful content of the page without unnecessary interruptions.

In the website we built for BOLD Business Decisions, we used decorative images in a form of pattern of small dots. We also added little illustrations next to each statement to enhance visual appeal, however they do not provide any meaningful information.

Image maps

These are images that are divided into multiple clickable regions or hotspots, where each hotspot links to a different destination. An excellent example of an image map could be a plan of a mall with various specific areas made clickable, allowing users to obtain more information about each shop located in that mall.

Image maps can be challenging for users with disabilities to navigate, especially for those using assistive technologies like screen readers.

WCAG recommends providing alternative methods of accessing the content or functionality offered by image maps, such as providing text-based links or buttons alongside or instead of the image map.

Groups of images

Groups of images refer to sets or collections of related images that are presented together, such as a photo gallery or a slideshow.

When presenting groups of images, it is important to ensure that the order and arrangement of the images are programmatically determined and can be understood by assistive technologies. Each image within the group should also have appropriate alt text to provide a meaningful description or context for the image.

Complex images

These are images that contain detailed or intricate information that cannot be adequately described in a brief alt text alone. These images may include diagrams, charts, graphs, or illustrations that convey complex concepts or data.

To make complex images accessible, WCAG recommends providing a text alternative (alt text) that succinctly describes the purpose or content of the image, and if necessary, providing additional descriptive information in the surrounding text or through linked text.

Images of text

Images of text are basically pictures that contain words instead of actual text that can be selected or resized. While they may look fancy or stylish, they can create problems for people who rely on assistive technologies.

WCAG recommends using real text instead of images of text whenever possible, so that everyone can access and understand the information easily.

In exceptional cases where it is necessary to use images that display text, the alternative text must accurately convey the exact same text as shown in the image.

Informative images

Informative images are the ones that actually provide important information or convey meaning. They help tell a story, illustrate a concept, or give extra details to the content. These images require alt text, which is a short description that explains what the image is showing. It helps people who can't see the image to understand its significance.

Here are a few tips on writing effective alt texts for informative images.

Be descriptive

Alt text should describe the content and function of the image, so users can understand the message or purpose even if they can't see the image.

Avoid using generic phrases like "image of" or "picture of," and instead, provide specific details that convey the image's meaning.

Don't: "Woman smiling"

This alt text is too general and doesn't provide any specific information about the image. It's better to be more descriptive.

Do: "Woman smiling while holding a bouquet of flowers at a wedding"

This alt text provides more context and information about the image, which can help users to better understand the content and purpose of the image.

Keep it concise and avoid unnecessary details

While it's important to provide enough information to convey the image's meaning, avoid including irrelevant or extraneous information that may distract or confuse the user.

Alt text should be brief and to the point. Aim for 125 characters or less, if possible, to ensure that it can be quickly read by a screen reader user.

Don't:  "A green apple with a stem, leaf, and small imperfections, grown in the Pacific Northwest region of the United States"

This alt text includes a lot of unnecessary details that do not contribute to the user's understanding of the image. The user does not need to know where the apple was grown or the specifics of its imperfections.

Do: "Green apple"

This alt text is concise and provides enough information for users to understand the content of the image.

Use plain language

Write in simple, clear language that is easy to understand. Avoid jargon or technical language that may be unfamiliar to some users.

Don't: "An alluring canine breed known for its thick and soft fur, a playful personality, and a love for chasing balls"

This alt text uses overly complex language to describe a dog. Some users may not be familiar with the term "canine breed," and the description of the dog's personality and interests is not necessary for understanding the image.

Do: "Golden Retriever playing with a ball"

This alt text is simple and uses plain language that is easy for all users to understand.

Use proper punctuation

Alt text should be punctuated properly so that it is clear and easy to read. Use proper capitalization and avoid using all caps.

Don't: "Two friends hiking in a forest covered in green leaves with blue skies and white clouds in the background"

This alt text lacks proper punctuation, which can make it difficult for some users to understand. The lack of commas between the different descriptive phrases can make it harder to distinguish between the different elements of the image.

Do: Two friends hiking in a forest, with green leaves, blue skies, and white clouds in the background"

This alt text uses proper punctuation to separate the different descriptive phrases, making it easier for users to understand the content of the image.

Consider context

Alt text should be written with the context of the surrounding content in mind. If the image is part of a larger group or sequence, make sure the alt text conveys its relationship to the other content.

Don't: "John Smith"

This alt text is not specific enough and does not provide any context for the user. Without additional information, the user may not understand the purpose of the image.

Do: "John Smith, CEO of XYZ Company, speaking at a conference"

This alt text provides context for the user by identifying the person in the image, their role, and the situation in which the photo was taken.

Don't duplicate surrounding text

Avoid duplicating the text that appears near the image in the alt text. Instead, focus on providing additional information that is not already present in the surrounding text.

Don't: "Our team of experts" (with an image of a group of people)

Let's sat "Our team of experts" is already written in the heading nearby. This alt text duplicates the surrounding text and does not provide any additional information about the image.

Do: "Group of experts in a meeting"

This alt text provides additional information about the image, identifying the context in which the photo was taken and providing more detail about the people depicted.

Balance between decorate and informative images

It's important to strike a balance between providing alt text for informative images and properly identifying and marking decorative images to ensure accessibility for individuals with disabilities while avoiding unnecessary clutter in assistive technology output.

Conclusion

Overall, the goal of alt text is to provide a concise and accurate description of the image that enables users to understand its content and purpose. By following these best practices, you can ensure that your alt text is effective in improving website accessibility for all users.