Alt Text Best Practices

What is Alt Text?

Alt text, sometimes known as “alt attributes” or “alt descriptions,” is text (in HTML or other written, electronic copy) used to convey the image’s content or function to screen-reading software. Alt text is also used in place of an image in the event of broken image links or insufficient bandwidth to load images. Alt text can help to optimize your content for web image searches, although “stuffing” keywords into alt text solely to drive search results should be avoided.

Crafting Alt Text

Before writing alt text, determine if it should convey the image’s content or function. Very rarely, an image may convey content and serve a function, but generally not both.

If the Image Serves A Function (linked images) 

If the image serves as a hyperlink rather than conveying unique content, alt text should be straightforward and describe the purpose of the image button or the location to which the image hyperlinked.

In the following example, the image takes you to TU’s homepage, therefore, the alt text is simply “Towson University.” There is no need to use words like “website,” “site,” or “homepage” as that will be evident from the manner in which a screen reader recognizes hyperlinks.

 

---

If the Image Conveys Content (non-linked images)

If the image is used to visually convey information, and does not serve as a hyperlink, the alt text should convey the same information that the visual image conveys. Crafting this type of alt text is not as straightforward as crafting alt text for images that facilitate a function. Use these tips for guidance:

• Do be equivalent and accurate in conveying the content of the image.
• Do consider the context of your page or document (see the example in the Image Context section for more guidance).
• Do be succinct. While you want to convey equivalent content to the image, it is important to avoid alt text that goes into excessive detail, conveying more information than the image conveys visually. In most cases, your alt text should just be a few words, though for more complex images, a sentence or two may be appropriate.
• Do use punctuation and proper sentence structure.
• Don’t use the words “graphic of,” “image of” or similar phrasing. Screen-reading software knows when it encounters an image and communicates this.
• Don’t use text within your image if at all avoidable. In some cases, it may be necessary to do. In these cases replicate the text within the image verbatim.

Image Context

What constitutes “good” or “accurate and equivalent” alt text can vary based on the context in which the image is presented. Use your best judgment based on the context of your document or webpage.

Alt text should be modified, depending on the context. For example, here is the same image presented in two different contexts:

---

The next two images show examples of images that don't require a lot of details. The context of the image can be explained with very little explanation.