How to write alt text descriptions: A comprehensive guide

Visual content plays a key role in the digital environment to understand and communicate information. Alt text, or alternative text, serves as a vital bridge between visual and non-visual users, providing a textual description for images and other visual elements. That’s why by creating effective alt text, you can make your website more inclusive, improve user experience, and boost your search engine rankings.

This comprehensive guide will delve into the key aspects of writing informative and accurate alt text descriptions. We’ll explore the importance of alt text, best practices for creating effective descriptions, common mistakes to avoid, tips for specific image types, and Infogram’s accessibility features that make creating inclusive data visualizations a simple and seamless experience.

What is alt text?

Alt text, or alternative text, is a crucial element for making your website accessible to all users, especially those with visual impairments who rely on screen readers. It provides a textual description of an image, helping users understand the content without relying solely on sight.

For example, if your project contains an image with a city view, the alt text could say: “A skyscraper view from the top floor of a modern office building, with a cityscape and a river in the background.” This alt text would provide a clear description of the view for users who cannot see the image.

Why is alt text important?

Alt text is a fundamental component of web accessibility, ensuring that your content is inclusive and understandable for all users. It plays a crucial role in bridging the gap between visual and non-visual users, enriching the overall user experience, and improving search engine visibility.

Beyond accessibility, alt text also contributes to search engine optimization (SEO). By incorporating relevant keywords into your alt text, you can help search engines understand the content of your images, making them more discoverable through image search queries. This can lead to increased organic traffic and improved search engine rankings.

Additionally, alt text improves the overall user experience by providing additional context for images. This can be especially beneficial for users with slow internet connections, as alt text can offer a textual description while the image is still loading, preventing interruptions in the user’s flow.

How to write good alt text descriptions: Best practices and tips

Alt text should be concise, informative, and descriptive, providing a clear and accurate representation of the image’s content. Here are some essential guidelines to follow:

Conciseness

Keep alt text concise and informative, focusing on conveying the image’s essential meaning. Avoid unnecessary details or repetition. For example, instead of “A photo of a cat sitting on a couch,” simply use “Tabby cat perched on a gray couch.” The revised sentence provides more specific details while maintaining a concise format, creating a smoother flow of information.

Descriptive language

Choose words that accurately describe the image’s content. Avoid vague or generic terms like “image” or “picture.” Be specific and provide context if necessary. For example, instead of “A picture of a dog,” use “Golden retriever playing fetch in a park.” This more detailed description helps users better understand the image’s content.

Contextual relevance

Make sure that the alt text is relevant to the surrounding content and the page’s purpose. The description should be meaningful within the context of the website. For example, if the image is a product photo, the alt text should include the product name and key features. This will help users understand the image’s relevance to the overall page content.

Avoiding redundancy

If the image has a caption or title, the alt text can be a concise summary or reinforce the caption’s meaning. Here, it’s important to avoid repeating the same information in both the caption and alt text. For example, if the caption is “A breathtaking sunset over the ocean,” the alt text could simply be “Sunset over the ocean.” This helps to streamline the user experience and avoids redundancy.

Grammatical accuracy

Make sure that the alt text is grammatically correct and easy to read. You should use proper punctuation to improve clarity. For example, instead of “A dog chasing a ball,” use “A dog is chasing a ball.” This helps to improve the overall readability and accessibility of the alt text.

Prioritizing informative images

Focus on providing informative alt text for images that communicate important content. For purely decorative images, use an empty alt text or a generic description like “decorative image.” This helps screen reader users understand the purpose of the image and avoid unnecessary distractions, improving their overall experience.

Testing your alt text

Finally, use a screen reader or browser extension to test how your alt text is rendered. Ensure that it accurately conveys the image’s meaning and is accessible to users with visual impairments. This will help you identify any issues or inconsistencies in your alt text descriptions. Ultimately, by testing your alt text, you can make necessary adjustments to improve its effectiveness and make sure all of your users have a positive experience.

By following these tips, you can create alt text that is informative, accurate, and accessible to all users, regardless of their visual abilities.

Common mistakes to avoid

If you’re taking the aforementioned tips into account, you’re already on the path to success. However, when writing alt text, it’s also important to be mindful of common mistakes that can spoil accessibility and user experience. 

For example, avoid overly long descriptions, as concise and informative alt text is crucial. The phrases “image of” or “picture of” are redundant and don’t provide meaningful information. 

Also, while decorative images may not require detailed alt text, they should still have a brief description for accessibility. 

And lastly, remember that alt text is primarily for accessibility purposes, while captions can provide additional context or information.

Additional tips for specific image types

When writing alt text, also take into consideration the specific type of visuals you’re describing. There should be a different approach to describing them.

Charts and graphs

• Data description: Clearly describe the data represented in the chart or graph, including the type of data (e.g., numerical, categorical), units of measurement, and any relevant labels or legends.
• Trends and patterns: Highlight any significant trends, patterns, or correlations observed in the data.
• Key points: Summarize the main takeaways or conclusions that can be drawn from the chart or graph.

Example: “A line chart showing the increase in global temperatures over the past century, with labels for years and temperature in degrees Celsius. The chart indicates a clear upward trend, with the highest temperature recorded in 2023.”

Logos

• Company or organization name: Use the official name of the company or organization represented by the logo as the alt text.

Example: “The McDonald’s logo, a golden arch.”

Photos

• Scene or people: Describe the main scene or people depicted in the photo, focusing on relevant details that contribute to the overall meaning.
• Action or emotion: If there is any significant action or emotion conveyed in the photo, be sure to mention it in the alt text.

Example: “A photo of a group of people laughing and celebrating at a graduation ceremony, with a diploma in the foreground and a festive atmosphere in the background.”

By following these guidelines, you can ensure that your website is easily accessible and provides a positive experience for everyone.

Infogram: Improved accessibility with alt text and more

Infogram is a powerful tool for creating visually appealing charts, infographics, reports, and more. Beyond Infogram’s design capabilities, we also prioritize accessibility, allowing you to add alt text descriptions to various elements, including images, icons, shapes, interactive charts, and maps.

Adding alt text descriptions

Here’s how to easily add alt text to your Infogram visuals in 3 steps:

1. Locate the element: Click on the specific image, icon, shape, chart, or map you want to add alt text to.
2. Access the accessibility settings: Look for the “Settings” panel on your right and locate the field labeled “Accessibility.”
3. Enter a detailed description: Type a concise and informative description that accurately conveys the content of the element.

By adding alt text to your Infogram elements, you’ll make sure that users with visual impairments can understand the information presented, making your content more inclusive and accessible.

Additional accessibility features in Infogram

At Infogram, we’re dedicated to making data visualization accessible to all. That’s why we’ve implemented (and continue to improve) accessibility features to cater to all audiences. Here’s a quick overview of what you can expect at Infogram:

Keyboard navigation: Infogram supports full keyboard navigation, allowing users to interact with the platform without relying solely on a mouse.

Screen reader compatibility: Infogram is designed to be compatible with popular screen readers, providing users with auditory descriptions of visual elements.

High contrast mode: Users can enable high contrast mode to improve visibility and readability for those with visual impairments.

Color contrast: Infogram offers tools to ensure that the color contrast between text and background meets accessibility standards, making the content easier to read. Plus, we also offer a color blind friendly theme that you can easily apply to your projects. 

By leveraging these accessibility features, you can create Infogram content that is inclusive and accessible to a wider audience.

To learn more about how to create accessible charts and graphs, read our blog article on accessibility.

Alt text descriptions: Informative and inclusive

Creating effective alt text is essential for making sure that your website is accessible to all users, regardless of their visual abilities. If you’re wondering how to write alt text descriptions that are informative and inclusive, simply follow the guidelines outlined in this article and improve your website’s accessibility.

Infogram plays a crucial role in promoting accessibility by providing a user-friendly platform for creating visually appealing content. You can easily add alt text to various elements, make your content screen-reader friendly, and more. Ultimately, by incorporating alt text into your Infogram creations, you can contribute to a more inclusive digital space and ensure that your content reaches as many people as possible.