The Art of Alt Text: More Than Just a Description

The Art of Alt Text: More Than Just a Description

The alt (Alternative Text) attribute on images is the oldest and most fundamental accessibility feature on the web (originating in HTML 2.0 in 1995). Ironically, to this day, it remains one of the most frequently violated or misunderstood WCAG criteria by developers and content creators alike.

Based on insights from Chapter 1 of Practical Web Accessibility by Ashley Firth, this article will explore why writing alt text is not an exact science, but rather an art of weaving context. We will discuss when to leave it empty, when to detail it, and which words should be strictly banned.

---

1. The Myth: All Images Must Have Long Alt Text

The most common mistake made by junior developers—or automated CMS tools—is providing a lengthy description for every single graphical element on a page.

If an image is purely Decorative (it exists solely to beautify the visual layout without providing any unique information), it must have an empty alt attribute (known as a null alt attribute).

<!-- CORRECT: Decorative images are ignored by Screen Readers -->
<img src="floral-border.png" alt="">

<!-- INCORRECT: Wasting the Screen Reader user's time -->
<img src="floral-border.png" alt="A red dividing line with a rose flower motif">

When a Screen Reader encounters alt="", it skips the image entirely, saving the listener from irrelevant noise.

[!CAUTION] Do Not Remove the Alt Attribute: If you completely omit the alt attribute (instead of leaving it empty), some Screen Readers will read the image's filename aloud instead (e.g., "floral-line-final-v2.png"). This is a UX nightmare.

---

2. Informative Images vs. Functional Images

If the image is not decorative, you must determine whether it is informative or functional.

A. Informative Images

These images convey data, emotion, or context that is not present in the surrounding text. Imagine you are reading a news article about a protest. - Bad: `alt="Police and protesters"` (Too brief, no context). - Good: `alt="Hundreds of protesters marching in front of the parliament building carrying banners opposing the bill"` (Provides the emotion and context of the news).

B. Functional Images (Icons)

These images act as buttons or links. Their context is what happens if clicked, not what they visually look like. For example, a magnifying glass icon (🔍) acting as a search button. - Bad: `alt="Magnifying glass"` (A blind user will be confused as to why there is a magnifying glass there). - Good: `alt="Search this site"` (Explains the function of the interactive element).

---

3. Three Golden Rules of Alt Text (According to Ashley Firth)

1. Never Use "Image of" or "Photo of": Screen Readers already announce the <img> tag by saying the word "Graphic" or "Image" before reading your alternative text. If you write alt="Image of a dog", the user will hear: "Graphic, Image of a dog". Get straight to the point: alt="A Golden Retriever dog".

   Related Insight

   Applying the 7 Principles of Universal Design in a Web Context

2. Context is Everything: The exact same image of a dog will require different alt text depending on the website it's hosted on.

   • On a veterinarian's website: alt="A Golden Retriever dog showing signs of an ear infection."
   • On an animal adoption website: alt="Buster, a cheerful 3-year-old Golden Retriever ready for adoption."

3. Limit the Length (Around 125 Characters): While there is no official limit in the HTML specification, many popular Screen Readers (like JAWS) chop the reading of alt text into 125-character blocks. If you are describing a complex infographic or chart, do not cram everything into the alt attribute. Use the aria-describedby attribute to point to a long paragraph that describes the data, or provide a data table as an alternative.

---

4. Conclusion

Writing alternative text is not just about satisfying an automated audit tool or improving your image's SEO ranking on Google. It is about transferring visual experience and meaning to humans who cannot see the screen.

Before you type into alt="...", close your eyes and ask yourself: "If someone were reading this webpage to me over the phone, what graphical information would I be missing if this image wasn't mentioned?" The answer to that question is your Alt Text.

---

References

The philosophy of the fundamental differences between decorative, functional, and informative images in this article is extracted from the technical arguments in Practical Web Accessibility by Ashley Firth (Chapter 1). The practical rules such as the avoidance of "Image of" phrases and length limitation recommendations refer to the inclusive standards detailed in that literature.