What is alternative text? How do I write it for images, charts, and graphs?

Introduction

This tutorial provides a comprehensive guide to understanding and writing alternative text (alt text) for images, charts, and graphs. Alt text is essential for making visual content accessible to individuals with visual impairments and plays a crucial role in web accessibility. By the end of this guide, you will know how to create effective alt text for various types of visual content.

Step 1: Understand What Alternative Text Is

• Alternative text is a written description of an image that helps users who cannot see the image understand its content.
• It is beneficial for:
  • Individuals using screen readers.
  • Improving SEO by providing context to search engines.
• Alt text should convey the essential information and context of the image.

Step 2: Determine Where and How to Add Alt Text

• Alt text can be added in HTML using the alt attribute within the <img> tag:

  <img src="image.jpg" alt="Description of the image">
  

• When using content management systems (CMS), there is often a designated field for adding alt text when uploading images.

Step 3: Consider Key Factors When Writing Alt Text

• Focus on the main purpose of the image and what information it conveys.
• Be concise; aim for a description of 125 characters or fewer.
• Avoid using phrases like "image of" or "picture of."
• Consider the context in which the image is presented; this informs what details are most relevant.

Step 4: Write Alt Text for Simple Images

Example 1: Photograph of Southampton's Bargate

• Alt text: "The Bargate, a medieval gatehouse in Southampton, with a clock tower at the top."

Example 2: Stock Photo of Two People Shaking Hands

• Alt text: "Two business professionals shaking hands in a formal setting."

Step 5: Differentiate Between Captions and Alternative Text

• Captions provide context and explanation for images and can be seen by all users.
• Alt text is specifically for accessibility and is read by screen readers.

Step 6: Write Alt Text for Complex Images

Example 3: Process of Photosynthesis Diagram

• Alt text: "Diagram showing the process of photosynthesis, illustrating sunlight, chlorophyll, carbon dioxide, and glucose production."

Step 7: Add Alt Text to Documentation Screenshots

• Write alt text that describes what the screenshot shows, including key elements like buttons or sections:
  • Alt text: "Screenshot of the software interface displaying the main dashboard with navigation tabs."

Step 8: Write Alt Text for Charts and Graphs

• Focus on the data presented and the conclusions that can be drawn.

Example 1: Complex Line Graph

• Alt text: "Line graph depicting the sales growth of three products over a five-year period, with the blue line representing Product A, the red line for Product B, and the green line for Product C."

Example 2: Venn Diagram

• Alt text: "Venn diagram illustrating the overlap between three categories: Technology, Innovation, and Efficiency."

Example 3: Flow Chart

• Alt text: "Flow chart outlining the decision-making process for project approval, starting with project proposal followed by feasibility analysis and final approval."

Step 9: Determine the Length of Alt Text

• Be succinct while providing enough detail to convey the image's purpose. Generally, 125 characters is a good target.
• Avoid excessive detail that may overwhelm the user.

Conclusion

Creating effective alternative text is vital for accessibility and improving user experience. Remember to focus on the purpose of the image, keep descriptions concise, and adapt your alt text based on the complexity of the visual content. By following these guidelines, you can ensure that your images, charts, and graphs are accessible to all users. Consider reviewing your existing content to add or improve alt text where necessary.