✎ Technique: Writing alternative text

The most appropriate alternative text for an image depends very much on the context of the image in question. You must provide information for that image that takes into account its purpose and also the surrounding text on the page. The same image might need different alternative text depending on how it's used.

Examples

Let's look at some examples of appropriate alternative text, using the same Harvard University logo in different contexts.

Stand-alone

In this basic example, we’re just using the Harvard logo to indicate that the page is associated with Harvard University. In this case, the alternative text should say something like "Harvard University logo."

But if the logo were provided as an example of logo design, we might want to go further and opt for something like "Harvard University logo, featuring black, serif text and a red shield emblem", as in this example:

Harvard University logo featuring black, serif text and a red shield emblem

Inside a link

It's a web-design convention to use a logo graphic as a link back to a site's home page. In this case, we would use alternative text that describes the action of the link. After placing the logo inside a link pointing to the home page, appropriate alternative text might be "Harvard University home page" or similar. A screen reader would identify that the image is also a link and say, "Harvard University homepage, link."

Harvard University homepage

 

Inline with text

In rare occasions, an image of text might be used inline as a substitute for text. For instance, we might want to write "Welcome to Harvard University" using the logo instead of the words "Harvard University." In this case, we should focus on writing alternative text that stands in for the visible text within the logo, without adding any extraneous information—that is, you’d want the alternative text to just say "Harvard University". We wouldn't want a screen reader announcing, "Welcome to the Harvard University logo"!

Welcome to Harvard University

Video: Adding alternative text to images in a WYSIWYG editor