Striving to remove barriers that prevent us from building Vibrant, Diverse, Inclusive, Accessible Communities!

 

.

How to Write Meaningful and Inclusive Descriptive ALT Text for Images

On a computer screen, an image shows a cheerful Black man in dark glasses, navigating a wheelchair through a lush, natural environment. He appears to be going off a path surrounded by greenery. The image includes a tag stating, "ALT Text: A concise, accessible, descriptive, and inclusive label for photos, images, charts, and diagrams, allowing Blind People and others with disabilities to understand the content in context."

Dive into the art of crafting meaningful and inclusive ALT text that transcends mere identification. Explore a comprehensive resource collection to refine your skills and foster inclusive experiences. Learn to create ALT text that not only provides accessibility but also captures the essence of images. Uncover insights on customizing descriptions for various digital platforms and follow best practices for book covers, logos, and mastheads. Elevate the accessibility and inclusivity of your content by embracing the potential of descriptive ALT text.

Understanding the Essence:

When describing images, it's crucial to differentiate between simple identification and concise meaningful inclusive depictions. This distinction applies not only to objects but also to individuals. By offering informative descriptions, you extend accessibility to those who cannot view the image, fostering inclusivity. A well-crafted image description holds the potential to shape an experience that's truly accessible, inclusive, meaningful and enriching. Don't underestimate its impact—embrace the art of inclusive image descriptions in your content!

From Names to Inclusive Descriptions: Empowering Accessibility:

It's a common error that many people make to only put the person's name in the Alt Text field when they include a picture of someone. But this method isn't very helpful because it doesn't give any useful information about the person or what they're doing. The photo of the person was added for a specific reason, and using their name as the ALT Text doesn't really explain that reason. If all that was needed was the person's name, then why even add a picture? Why not just write their name down? What's the point of having the image and what does it show about the person? It's really important to give a detailed description of the image to make it accessible and inclusive. So, don't make the mistake of just labeling the image with a name. Instead, put in the effort to come up with a descriptive Alt Text that accurately describes the person in the image, what they're doing, and why the picture was included in the first place.

Suppose I were to provide an Alt Text that solely reads "Rue Dalton." What information does it offer about this person? Does Rue Dalton identify as a young Asian boy, an esteemed Black elder, or an Indigenous woman? Or is Rue Dalton a young person actively contributing to making a difference in the world, as depicted in the photo? And perhaps most importantly, how does Rue Dalton self-identify? It's vital to include a detailed description of the image, including what Rue Dalton is doing in the photo, to provide an accurate and inclusive representation.

The key point is that in the Baha'i community, both accomplishments and diversity are celebrated. Therefore, when it comes to adding an Alt Text for an image of a person, it's important to provide a genuine meaningful and inclusive description instead of just their name. Simply mentioning the person's name doesn't convey any useful information, rendering it meaningless. It's essential to craft a descriptive Alt Text that accurately depicts the image and its purpose. 

Here are some Examples:

  • ALT Text/Caption: Rue Dalton, a Blind woman, facilitates a neighborhood Study Circle focusing on RUHI Book 1. She reads from a Braille copy, while others utilize standard printed workbooks. Rue writes her responses on a portable Braille Note Touch, while others opt to write directly in their workbooks or use notebooks.
  • Alt Text: "Rue Dalton, a young woman of Korean heritage with a welcoming smile, adorned with a delicate hanbok-inspired pendant and wearing glasses, engaged in a Baha'i devotional gathering, fostering unity and spiritual growth."
  • Inclusive description of Rue Dalton: Introducing Rue Dalton, a vibrant and dynamic Black Baha'i Youth, he sports hair styled with two-strand twists and a drop fade, adorned with rings and cowries. Rue leads a neighborhood devotional walk, actively fostering unity and connection within the community.
  • Alt Text: "Rue Dalton, an inspiring Indigenous woman wearing a beautifully crafted silver necklace and business casual attire, actively participating in a Junior Youth Empowerment Program, fostering growth and connection."
     

Tailoring ALT Text for Different Environments: Insights from Microsoft's Study:

In a recent study, Microsoft's Artificial Intelligence researchers found that the effectiveness of image descriptions varies depending on the digital environment in which the image is displayed. They created a chart to demonstrate how image description preferences differ across seven different sources: news websites, social networking sites/platforms, e-commerce websites, employer/employment websites, online dating websites/platforms, productivity applications, and e-publications. This chart could assist you in determining which features to include in your ALT Text descriptions of people in photos as well.


Best Practices for ALT Text for Book Covers:

When creating alt text for book covers in online advertising, it's important to consider accessibility and provide descriptive and meaningful and inclusive descriptions that convey the essence of the book while adhering to best practices. Here are some guidelines for crafting effective alt text for book covers:

  1. Be Descriptive: Provide a concise and accurate description of the book cover's key visual elements, such as title, author, main imagery, and any relevant design elements. Focus on conveying the essential information that would give users a clear idea of what the book is about.
  2. Include Key Details: Mention important details like the book's title, author, genre, and any notable imagery that is central to the book's theme or storyline. This information helps users understand the book's content and context.
  3. Keep it Concise: Alt text should be concise and to the point while conveying the necessary information. Aim for a brief description that captures the book's essence without being overly verbose.
  4. Avoid Unnecessary Fluff: While creativity is important, avoid excessive embellishments or marketing language. The alt text should be informative and straightforward, catering to users who rely on screen readers.
  5. Consider Target Audience: Think about the intended audience for the book and tailor the alt text to resonate with them. Highlight elements that would pique the interest of potential readers.
  6. Use Proper Punctuation: Use appropriate punctuation to ensure the alt text is clear and grammatically correct. This aids in its proper interpretation by screen readers.
  7. Skip "Image of" or "Picture of": Modern screen readers typically announce that an image is being presented, so there's no need to explicitly state "Image of" or "Picture of" in the alt text.
  8. Maintain Consistency: If the book cover is used across various advertisements or platforms, try to maintain consistent alt text to provide a cohesive experience for users.
  9. Test and Review: Test the alt text with screen readers to ensure it accurately conveys the desired information and meets accessibility standards.

Examples of Effective Alt Text for Book Covers:

  1. "Book cover: 'The Secret Garden' by Frances Hodgson Burnett – A classic novel set in a hidden garden, filled with mystery and wonder."
  2. "Cover of 'The Catcher in the Rye' by J.D. Salinger – A red hunting hat rests on a fence, symbolizing Holden Caulfield's journey."
  3. "Illustrated cover of 'Where the Wild Things Are' by Maurice Sendak – Max sails on a boat to a magical island of wild creatures."

Remember, the goal of alt text is to provide an inclusive experience for all users, including those who cannot see the visual content. By following these best practices, you can ensure that your alt text effectively communicates the essence of the book covers in online advertising.


Best Practices for Describing logos and mastheads effectively in alt text

Crafting alt text that is both meaningful and inclusive is crucial when it comes to effectively describing logos and mastheads. This practice ensures that your website or content remains accessible to people who depend on screen readers or other assistive technologies. Alt text serves as a textual representation of images, enabling users who cannot see or view the images to grasp their content and significance. Here are some Best Practices for describing logos and mastheads in alt text:

  1. Be Descriptive and Concise: Provide a succinct yet accurate description of the logo or masthead. Focus on conveying the essential information without unnecessary details.
  2. Include Brand Information: Clearly mention the brand name, company, or organization associated with the logo or masthead. This helps users identify the source of the content.
  3. Describe Visual Elements: Describe any visual elements, symbols, or typography used in the logo or masthead. Highlight unique features that contribute to the logo's identity.
  4. Convey Purpose and Function: Explain the purpose or function of the logo or masthead. For example, if it's a site logo, mention that it's the site's logo and serves as a link to the homepage.
  5. Avoid Generic Terms: Avoid using generic terms like "image" or "graphic" as alt text. These terms don't provide meaningful information about the image's content or purpose.
  6. Consider Context: Take into account the context in which the logo or masthead appears. The alt text may vary depending on whether it's on a homepage, a blog post, or a product page.
  7. Use Proper Grammar and Punctuation: Ensure that your alt text follows proper grammar and punctuation rules to make it easier for screen reader users to understand.
  8. Don't Rely on File Names: Avoid using file names or filenames as alt text. File names are often cryptic and may not accurately describe the image.
  9. Don't Overstuff Keywords: While it's important to include relevant keywords, avoid keyword stuffing. Focus on creating a coherent and meaningful description.
  10. Test with Screen Readers: Test your alt text with screen readers to ensure that it conveys the intended information effectively and is read out accurately.

Here are some examples of alt text for a logo and a masthead:

Logo Alt Text: "Company XYZ's circular logo featuring a blue globe with white continents. The company name 'XYZ' is written in bold white text below the globe."

Masthead Alt Text: "The website's masthead displaying a banner with the title 'Daily News.' The banner includes a gradient background with a combination of blue and purple colors. The typography is bold and modern, with the words 'Daily' and 'News' in white uppercase letters."

Remember that alt text serves as a crucial accessibility feature, so take the time to create meaningful and accurate descriptions that enhance the user experience for all visitors to your website or content.


Also see:

✓ Special Case: How to write an image description

Striving to remove barriers that prevent us from building a Diverse, Vibrant, Inclusive, Accessible Community!

Share or Print with:

Share