Writing Effective Alt Text for Accessibility

Alternative (Alt) Text is a crucial component of making web content accessible to all users, particularly those who rely on screen readers. Alt text serves as a textual substitute for images, ensuring that visually impaired users can understand and benefit from the content on your site. Here are some best practices and tips to help you write effective alt text.

What is Alt Text?

Alt Text is a brief description that conveys the content and function of an image on a webpage. It is read aloud by screen readers, helping users understand the image’s purpose. Properly written alt text enhances accessibility, user experience, and even SEO.

Alt Text Best Practices

1. Keep It Short and Relevant
   • Alt text should be concise, typically 1-2 sentences. Focus on the essential elements of the image rather than describing every detail.
   • 
   • Example: instead of “Two Women,” use “Two women smile at the camera with Wembley Stadium behind them.”

     • Alt Tag Race Descriptions

     • This then also brings up the issue of race – should we describe the racial characteristics of the subjects?
     • “When we don’t describe the race of someone in an image, we push the narrative that what our society deems as the default (usually a white person), is the default.” TOLU ADEGBITE, “THE CASE FOR DESCRIBING RACE IN ALTERNATIVE TEXT ATTRIBUTES,” 28 JANUARY 2022
     • The key is to be specific – “Two BAME women smile at the camera with Wembley Stadium behind them.” doesn’t add a huge amount.
     • “Remi a black Wembley Employee and Seema a Blind Indian woman smile at the camera with Wembley Stadium behind them.” or
     • “A black Wembley Employee and Blind Indian woman smile at the camera with Wembley Stadium behind them.” if you want to be concise.
     • The critical point is that a blind person hearing that description will get a good sense of the picture and what it is conveying.
2. Provide Context
   • Describe how the image relates to the surrounding content. This helps users understand the image’s significance.
   • Example: For a logo, “Blind Ambition’s Logo a coloured circle with one purple segment” is better than just “BlindAmbition.”
3. Avoid Redundancy
   • Do not repeat information that is already present in the surrounding text. Alt text should add value, not duplicate content.
4. Describe Function for Linked Images
   • If the image is a link, describe the action it performs, not just the image.
   • Example: For a help icon linking to a support page, use “Contact Support” instead of “Question Mark.”
5. Spell Check
   • Ensure that your alt text is free of spelling errors to avoid confusion for screen reader users.
6. Use CamelCase for Hashtags
   • When using hashtags, write them in CamelCase (e.g., #CamelCase) to make them easier to read for screen readers.
7. Avoid Using “Image of” or “Picture of”
   • Jump straight into the description. Screen readers already identify the content as an image.
   • Example: Use “Print the Event Schedule” instead of “Printer icon.”
8. Be Specific with Keywords
   • Include relevant keywords naturally to enhance SEO without keyword stuffing.
   • Example: For a product image, use “Baseball hat, side view.”
9. Describe Visual and Functional Content
   • If an image has text, include this text in the alt description if it is not repeated nearby.
   • Example: “Sign reading ‘This is the future'”
10. Use Appropriate Language and Formatting

• Avoid using all caps and excessive punctuation, which can be misinterpreted by screen readers.

Additional Tips

• Hyperlinks: Use descriptive hyperlinks like “Click here for help” instead of raw URLs. This helps screen reader users understand the context without confusion.
• Alt Text for Charts and Graphs: Provide a summary of the information presented.
  • Example: “Bar chart showing a 30% increase in engagement from Q1 to Q2.”
• Complex Images: For detailed images, provide a longer description or link to a separate page with more information.

Benefits of Adding Alt Text

1. Accessibility: Ensures all users, including those with visual impairments, can understand and engage with your content.
2. User Experience: Provides a better experience for users with slow internet connections or those using devices that cannot display images.
3. SEO: Helps search engines index your images, potentially increasing organic traffic through image search results.

Testing and Resources

• Testing Tools: Use testing tools to hide images and display their alt text to ensure the page makes sense with images hidden.
• Resources:
  • Accessibility: Image Alt text best practices (Siteimprove)
  • Making Images Accessible (a collection of resources from the DIAGRAM Center for describing complex images)
  • Alt Text Decision Tree (W3C)
  • Understanding SC 1.1.1—Non-text Content (WAI)
  • Example of an accessible infographic (WebAIM)

By following these guidelines, you can make your emails and web content more accessible, providing a richer and more inclusive experience for all users. If you have additional tips or insights, please share them in the comments below!