Alt Text Best Practices
This guide provides information on how to use and create alternate (alt) text on TU鈥檚 website and other digital properties.
What is Alt Text?
Alt text, sometimes known as 鈥渁lt attributes鈥� or 鈥渁lt descriptions,鈥� is text (in HTML or other written, electronic copy) used to convey the image鈥檚 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 鈥渟tuffing鈥� 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鈥檚 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鈥檚 homepage, therefore, the alt text is simply 鈥淭owson University.鈥� There is no need to use words like 鈥渨ebsite,鈥� 鈥渟ite,鈥� or 鈥渉omepage鈥� as that will be evident from the manner in which a screen reader recognizes hyperlinks.
Function Alt Text Example
This image is hyperlinked to the 快活视频website, so the alt text should describe the page being linked to - in this case, alt text would be 鈥淭owson University.鈥�
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鈥檛 use the words 鈥済raphic of,鈥� 鈥渋mage of鈥� or similar phrasing. Screen-reading software knows when it encounters an image and communicates this.
- Don鈥檛 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 鈥済ood鈥� or 鈥渁ccurate 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:
Context Example 1
The image appears on the 快活视频homepage under the heading 鈥淓xplore 快活视频Programs.鈥� Alt text could be 鈥渢hree 快活视频students smiling with their smartphones.鈥� Since it is on a 快活视频site, these are not just young people, but 快活视频students.
Context Example 2
The image is used in a document about social media use among recent high school graduates. Alt text could be 鈥渢hree young adults smiling as they look at their smartphones.鈥� The important info is these are young adults (for example recent high school graduates) using smartphones, not their background or location of study.
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.
Context Example 3
In this example, appropriate alt text would be 鈥渃rowd at Towson University football game.鈥� This amount of text is succinct and conveys the same information displayed visually without giving excessive details.
Context Example 4
In this example, a photo of Commencement speaker Beverly Tatum, appropriate alt text would be 鈥淏everly Tatum.鈥� This is succinct and to the point. Details about attire, etc., would be considered excessive.