The Art of Alt Text

What is Alt Text?

Alt text (alternative text) is a written description of an image that appears in place of the image when it cannot be viewed. It's typically added to an image through the alt attribute in HTML or through accessibility options in social media platforms.

Alt text serves as a textual replacement for visual content, making information accessible to:

• Screen reader users who are blind or have low vision
• Users who have disabled images to save data or reduce distractions
• Users in environments where images cannot be loaded
• Search engines that use alt text to better understand and index images

Why Alt Text Matters

Alt text is not just a technical requirement—it's a fundamental aspect of creating an inclusive web experience. Here's why it matters:

Accessibility for Screen Reader Users

For blind or low-vision users who rely on screen readers, alt text is their only way to understand the content and context of images. Without alt text, important information is completely lost.

Benefits Beyond Accessibility

Alt text benefits everyone, not just screen reader users. Many people choose to turn off images to save data, reduce distractions, or improve loading times on slow connections. For them, well-written alt text is the only way to understand what would have been shown.

SEO and Searchability

Search engines can't "see" images, but they can read alt text. Descriptive alt text helps search engines understand and properly index your images, potentially improving your content's discoverability.

Legal Requirements

In many jurisdictions, providing accessible content (including alt text for images) is a legal requirement for certain websites, particularly for government, education, and business sites.

Key Principles of Good Alt Text

Effective alt text isn't just about writing any description—it's about providing the right information in the right way:

1. Be Specific and Contextual

Focus on what's important about the image in the context of the surrounding content. The same image might need different alt text depending on why it's being shared.

2. Be Concise but Comprehensive

Cover the essential elements without being overly verbose. Focus on what matters, not every minor detail. As a general guideline, aim for 8-80 characters, though complex images may require more.

3. Avoid Redundancy

Don't start with phrases like "image of" or "picture showing" as screen readers already announce that it's an image before reading the alt text.

4. Convey Both Content and Function

If an image serves a specific function (like a button or link), make sure to describe both what it shows and what it does.

5. Include Text Within Images

If the image contains text, include that text in your alt description, especially if it's important to understanding the content.

Using Altbot as Your Alt Text Assistant

Creating good alt text can sometimes feel challenging, especially when you're just starting out. This is where Altbot can help!

What is Altbot?

Altbot is a bot designed specifically to generate quality alt text for images on the Fediverse. It uses advanced local image processing to analyze images and create detailed, contextually appropriate descriptions.

The Human Touch is Essential

While Altbot provides excellent starting points, it's important to remember that AI-generated alt text should always be reviewed and edited by humans. Here's why:

• Context matters: Only you know the specific context in which you're sharing an image
• Cultural nuances: AI might miss cultural references or significance that you understand
• Personal perspective: Your images often reflect your personal experiences and intentions
• Specific focus: You know which elements of the image are most important to highlight

Best Practices When Using Altbot

How to Use Altbot

To use Altbot for generating alt text:

1. Follow @altbot on the Fediverse (@altbot@fuzzies.wtf)
2. When posting an image without alt text, it will generate one for you.
3. Alternatively, you can reply to your image post and mention @altbot and it will generate alt text for you.
4. Review the generated alt text and edit as needed
5. Copy the refined text into your image's alt text field

Step-by-Step Guide to Writing Alt Text

Follow this simple process to create effective alt text for any image:

Step 1: Identify the Purpose

Ask yourself why the image is being shared. Is it to convey information, evoke emotion, illustrate a concept, or serve as decoration?

Step 2: Focus on the Essential Elements

Determine what's most important about the image. What are the main subjects or actions? What would someone miss if they couldn't see it?

Step 3: Consider Context

How does this image relate to the surrounding content? The same photo might need different alt text depending on what point it's illustrating.

Step 4: Write a Clear Description

Based on the previous steps, write a description that:

• Begins with the most important information
• Uses specific language (e.g., "golden retriever" rather than just "dog")
• Avoids starting with "image of" or similar phrases
• Includes any essential text that appears in the image

Step 5: Review and Refine

Ask yourself:

• Would someone who can't see the image understand its purpose and content from my description?
• Have I included the most important information without unnecessary details?
• Is the language clear and concise?

Examples of Good vs. Bad Alt Text

Learning by example can help you understand what makes alt text effective:

Example 1: Dog Photo

Poor:

"Dog"

Too vague, provides no meaningful details about the image.

Poor:

"Image of a cute black dog sitting on the floor and looking at the camera with its adorable puppy eyes and shiny black coat against the wooden background with nice lighting."

Too verbose, includes unnecessary details and subjective judgments like "cute" and "adorable."

Good:

"Black labrador puppy sitting on wooden floorboards, looking directly at the camera with its head slightly tilted."

Specific about the breed, posture, and setting without being overly detailed or subjective.

Example 2: Workspace Photo

Poor:

"My desk"

Too vague, gives no information about what's on the desk.

Poor:

"Image showing a wooden desk with a laptop and coffee cup and notepad in a workspace environment with good lighting."

Redundant phrasing ("Image showing") and includes unnecessary details about lighting.

Good:

"Wooden desk with an open laptop displaying code, a notepad, and a cup of coffee."

Clearly describes the main elements without being overly detailed, and notes the code on the laptop which might be contextually important.

Common Mistakes to Avoid

Even with the best intentions, these common pitfalls can make your alt text less effective:

1. Starting with "Image of" or "Picture of"

Screen readers already announce to users that they're encountering an image before reading the alt text. Adding these phrases creates redundancy.

2. Being Too Vague

Descriptions like "chart," "dog," or "landscape" don't provide enough information to be useful.

3. Including Too Much Detail

Not everything in an image needs to be described. Focus on what's important in the context of your content.

4. Using Technical Jargon Unnecessarily

Unless your audience expects technical terminology, use clear, everyday language.

5. Forgetting Text in Images

If there's text in the image, especially important text like quotes or labels, include it in your alt text.

6. Making Assumptions

Be cautious about attributing emotions or intentions unless they're obvious. "Woman laughing" is usually safe, but "Woman contemplating her future" might be an assumption.

7. Using File Names or Image Numbers

Alt text like "IMG_20240415.jpg" or "DSC_1234" provides no useful information.

Special Cases: Different Types of Images

Different types of visual content may require different approaches:

Charts and Graphs

Focus on the main trend or conclusion the data is showing, and include key values or comparisons. For complex charts, consider providing a more detailed data table elsewhere in addition to alt text.

Example: "Line graph showing temperature increase of 2.5°C from 1980 to 2023, with the steepest rise occurring after 2010."

Diagrams and Infographics

Describe the overall purpose, then summarize the main components and relationships. For complex diagrams, consider providing a longer text alternative elsewhere.

Example: "Infographic showing 5 steps of the water cycle: evaporation, condensation, precipitation, collection, and transpiration, with arrows indicating the circular process."

Memes and Humor

Describe both the visual elements and any text overlay, since both are usually essential to understanding the joke.

Example: "Two-panel Spider-Man meme: first panel shows Peter Parker with glasses seeing clearly; second panel shows him without glasses squinting. Text reads 'Looking at your code at 5pm vs. Looking at it the next morning.'"

Decorative Images

If an image is purely decorative and adds no information, using an empty alt attribute (alt="") is appropriate, which tells screen readers to skip it.

Artwork and Photography

Describe the subject, composition, and important visual elements, without subjective interpretation unless that's specifically relevant.

Example: "Black and white photograph of an elderly person's hands holding a young child's hands, with deep wrinkles contrasting with smooth skin."

Alt Text Quality Checker

Wondering if your alt text is effective? Use this tool to evaluate the quality of your image descriptions.

Note: This is a demo and does some basic evaluation, but only a person can truly judge the quality of alt text.

Additional Resources

Want to learn more about creating effective alt text? Check out these resources:

• WebAIM: Alternative Text Guide
• W3C Web Accessibility Initiative: Images Tutorial
• Axess Lab: Alt-texts: The Ultimate Guide
• Follow @altbot on Mastodon for examples of AI-generated alt text
• Participate in the Unseen Image Challenge

Remember, good alt text is a skill that improves with practice. The more you write image descriptions, the more naturally it will come to you!