- Featured Columnists
- Faruk Ateş
- Andy Clarke
- Kris Hadlock
- Robert Hoekman, Jr.
- Molly Holzschlag
- Sarah Horton
- Usability Tips You Can Use: Designing Navigation with Lists
- Usability Tips You Can Use: Designing Forms for Keyboard Access
- Usability Tips You Can Use: Designing Flexible Layouts
- Usability Tips You Can Use: Designing Accessible Audio
- Designing Accessible Text—Part 1: Structure
- Designing Accessible Text—Part 2: Text Size
- Designing Accessible Text—Part 3: Color
- Designing Accessible Text—Part 4: Typeface
- Designing Usable Forms
- Designing Pages for Linear Access
- Designing Data Tables
- Working With Large Images
- Writing Link and Heading Text
- Writing Alternate Text for Images
- Cascading Style Sheets Part 1: Browser Styling
- Cascading Style Sheets Part 2: Shorthand
- Cascading Style Sheets Part 3: Media Style Sheets
- Cascading Style Sheets Part 4: Selective Printing
- Cascading Style Sheets Part 5: Styling for Print
- Cascading Style Sheets Part 6: Styling for Small-Screen Devices
- Miraz Jordan
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
- Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
Writing Alternate Text for Images
Last updated Feb 2, 2007.
By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers
If a picture is worth a thousand words, how can we describe an image in just one short phrase? That's the question on the lips of most designers confronted with the task of writing alternate text for images, and the answer is not clear-cut. First, we need to realize that the purpose of alternate text is not to painstakingly describe every detail of an image. Web users are generally on their way somewhere else and don't want to be bogged down by extraneous details. Alternate text should be helpful, not a nuisance, which means we first need to understand the role of images, and then find the words that convey what an image "says" within the context of the page.
In this article, I explore the editorial aspects of writing alternate text for both functional and content images by working through a series of images in different contexts. But let's lay the groundwork by first discussing the purpose of alternate text and its role in universal design.
The Purpose of Alternate Text
Universal design is a design approach that integrates accessibility features into, for example, walkways, entrances, elevators, rest rooms, and door handles.
To promote universally usable design, the Center for Universal Design at NC State University developed seven principles, with supporting guidelines, which outline the concepts and elements of universal design. Though developed to address access in the physical environment, many of the principles and guidelines translate quite handily to web space. In particular, the first principle and its first guideline are particularly well suited to our current discussion of alternate text:
Equitable Use: Provide the same means of use for all users: identical whenever possible, equivalent when not. Source: Universal Design Principles
Let's start by considering this principle and guideline in the context of paper towel dispensers and water fountains (or bubblers). A paper towel dispenser or water fountain positioned low on the wall is accessible to people who are sitting, standing, small, and tall—that's identical means of use. Two paper towel dispensers or water fountains, one high and one low, provide equivalent means of use—the high one is for tall, standing people and the low one is for small or sitting people.
On the web, HTML allows designers to design for same means of use of images through the inclusion of alternate text, sometimes referred to as alt-text. Alternate text is provided using the ALT attribute of the IMG tag, as shown in Figure 1 and Listing 1.
Figure 1: The Birth of Venus: Detail of Venus, painting by Sandro Botticelli
<img src="venus.jpg" alt="Detail of Venus ">
The text in the ALT attribute provides an equivalent textual description of the image, and is available, for example, to people who have difficultly seeing and interpreting images, people with slow Internet access who opt not to load images, people who access the web on small screen devices, and software that reads web pages, such as Google Images.
The concept and mechanics of alternate text are easy to accept, but perhaps you're thinking, you call that equivalent? The complexity of alternate text is in the substance, not the execution. Next, let's work through what's involved in using text to provide equivalent access to images.
Writing Alternate Text
The W3C's Core Techniques for Web Content Accessibility Guidelines 1.0 offers good, commonsense advice for writing alternate text. "A good test to determine if a text equivalent is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?" Notice that the goal is to make the page comprehensible, not the image. The point is not to use words to express the details and nuances of an image, but rather to describe the image within the context of the page. This distinction is critical in deciding how much, or how little, to say about an image.
In the next sections, we examine the role of functional images—images that guide and orient—and content images—images that inform—and discuss how we can provide equivalent functionality through alternate text.
A company logo is a simple, iconic representation that is readily recognizable and conveys information about company identity. On a web site, a persistent logo offers "you are here" functionality that orients users within the vast wilderness of the web. In Figure 2, we see an example logo treatment for the fictional company, Acme Fish Supply.
Figure 2: The full Acme Fish Supply logo contains an iconic representation of the company alongside the company wordmark.
Consider the role such a logo plays in the context of a web page. The wordmark tells us the name of the company. The icon tells us that fish are somehow relevant to the business of the site. And the icon conveys a sense of warmth and playfulness—it's a cute, friendly fish, not a piranha. So, how do we convey all this as text? We don't. We focus on the information necessary to comprehend and use the page.
Imagine if we were forced to ponder and interpret every iconic image we encountered: A red sign, octagonal, official and authoritative, with large, sans serif white text that reads, STOP... Crash! Not good. The goal of icons is to reduce, not increase, performance load, thereby making us less prone to error and more efficient and successful. When we provide lengthy, descriptive alternate text for an image whose purpose is iconic, we force users to attend to the details every time they encounter the image. While it might be interesting to know that the icon sports a cute, white fish against a royal blue background, this information is not essential to understanding and navigating the site, and would quickly become a nuisance if described on every page. So what is important to know about a logo?
With logos, alternate text should perform the function of the image, which is to quickly identify the source of the site. In the case of Figure 2, this can be accomplished by providing the company name. Additionally, it's useful, though not essential, to note that the image is a logo so that users understand its functional purpose on the page. Other such descriptors include photograph, screenshot, portrait, painting, illustration, diagram, chart, and so on.
<img src="logo.gif" alt="Acme Fish Supply logo" />
To understand the concept of functional alternate text more fully, let's consider another treatment of the Acme logo. In Figure 3, the Acme logo appears without the words, Acme Fish Supply. This approach works when a logo is visually distinctive and familiar enough to do its job without a label. The Apple logo, for example, is distinctive without the Apple wordmark. But the functional purpose of the logo is the same—to orient users. The logo still says, "Acme Fish Supply," even though the text does not appear next to the logo. This means the alternate text should do the same: orient users by providing the company name, as in Listing 2.
Figure 3: The Acme logo as an icon only serves the same orienting purpose as the full logo in Figure 2.
<img src="logo_small.gif" alt="Acme Fish Supply logo" />
In summary, images that serve a functional purpose need equivalent text that performs the same service, but only when the function is not handled via other methods. For example, the functional purpose of bullets is to mark off list items, but since markup delineates list items, bullets are not required for comprehension and therefore do not require descriptive alt-text.
Note that unnecessary images, such as bullets, should be coded with "blank" alt-text— alt=""—so they are ignored by software.
On the other hand, navigation images do require alternate text since HTML does not offer navigation-specific markup. In this case, the alternate text would serve the same purpose as the images: namely, to identify the destination of the link (see Figure 4 and Listing 4).
Figure 4: Navigation images require equivalent alternate text in order for a site to be usable without images.
<img src="home.gif" alt="Home" /> <img src="food.gif" alt="Food" /> <img src="supplies.gif" alt="Supplies" />
And now for something completely different—content images. Unlike logos and other design elements, which serve orientation and wayfinding functions, the purpose of content images is to convey information. For example, the purpose of a product photograph of, say, an aquarium is to describe visually its physical characteristics—size, lighting, trim color (see Figure 5). The information provided in the photograph complements the textual product description. In this case, users who cannot see the photograph need only know the functional purpose of the image—in this example, "6 G Nano Cube photograph"—since the details about the product are in the product description.
Let's move from fish to flowers and consider the image in Figure 6. The appropriate alternate text for this image depends on its usage context. Keeping in mind that our task is to provide a description that makes the page comprehensible to users, let's imagine a few different usage contexts.
Figure 6: Digital composite of a photograph and radiograph of tulips (image courtesy of Paul Horton, paulhortonphoto.com).
Let's say we're using this image to illustrate blend effects in a Photoshop tutorial. If we describe the technique for creating the image on the page, the alternate text need only identify the image: "Illustration 1: Composite of photograph and radiograph." In this case, the details of the image—how the images were captured and combined—belong in the text of the page and the image caption, not in the alternate text, since they are essential for all users.
How about we use this image to dress up a promotional site for, say, a digital radiography systems supplier with an artistic flair? In this case, the image is more ambiance than illustration, and is unlikely to be described in the content of the page. Therefore, we need to provide a little more description—"Photograph of tulips superimposed on a radiograph of the same tulips"—so that users who don't see the image experience its effect (Wow, tulips! Cool!).
It's easy to imagine other contexts for this image—a stock photo site, an online art exhibit. When the image is the "product," its description belongs in the main text and caption, with the alternate text serving only to identify the subject of the image: "Image 20047: Tulips Composite (Royalty Free)" or "Seeing Inside, digital composite by Paul Horton."
At the end of the day (and the end of this article) it's clear there is no clear-cut, comprehensive method for writing alternate text for images. Sure, we all want something formulaic, where we plug in an image and out pops the appropriate alternate text, but there is no magic formula. Writing alternate text is a subjective process, and there is no correct solution. Our task is to provide the words that tell the story, bearing in mind that the story is the page, not the image.
Here are some resources that might be of use:
- Those of you interested in incorporating accessibility into your designs should take a close look at the Universal Design Principles from the Center for Universal Design.
- My book, Access by Design: A Guide to Universal Usability for Web Designers, contains guidelines for writing alternate text in the Images chapter.
- For more perspectives on writing alternate text check out Creating Text Equivalents for Images from NASA's Section508 site and Appropriate Use of Alternative Text from WebAIM.
- See more great photography at my brother's web site, Paul Horton Photography.