Alt Text for Images
Alternative text, or alt text, is a written substitute for an image. It is used to describe information being provided by an image, graph, or any other visual element on a web page. It provides information about the context and function of an image for people with varying degrees of visual and cognitive impairments. When a screen reader encounters an image, it will read aloud the alternative text. Alternative text is required for all images that provide meaningful information.
Another benefit of alt text is when an image fails to load, the alt text will display in its place. There are many reasons people might view your web site without images including visual impairment or low-bandwidth internet connections. Including alt text with your images ensures all users, regardless of visual ability, can appreciate the content on your site.
Alternative text can be presented in two ways. Both these methods are explained in more detail below.
- Within the alt attribute of the img element. This is what is referred to as alt text in this documentation.
- Within the text surrounding the image.
- It should convey the context and function of the image. This is explained in further detail belwo.
- Keep it short and simple. Some screen readers only support 125 characters maximum.
- Don’t include “Image of” or “Photo of.” This is redundant because screen readers will announce it as an image.
- Don’t be redundant. Information previously presented in surrounding text should not be repeated.
- Start alt text with a capitol letter.
- Alt text should always end with a period, even if it’s not a complete sentence. This ensures the screen reader pauses after reading the alt text.
- Any image that is also a link must have alt text and the text should tell the visitor where the link is taking them.
- If the image contains text, the alt text should include the same text unless that text can be found in the content of the page near the image.
- Complex images, like charts, graphs, posters or flyers should have long descriptions in the page text and be located near the image. The image’s alt text should describe where the long description is located.
Vision disability is one of the top 10 disabilities among adults 18 years and older and one of the most prevalent disabling conditions among children.
Let’s look at a couple sample images to determine some possible alt text for each.
Poor alt text: hospital photo
Why: There is no need announce that this is a photo since the screen reader will do that automatically. Other issues with this alt text include lack of detail and no period at the end.
Simple alt text: UNC Medical Center.
Good alt text: Aerial view of UNC Medical Center in Chapel Hill, NC.
Simple alt text: Old Well.
Good alt text: Old Well in Spring with the trees and bushes in full bloom.
Consider The Context
Understanding the context of the image is critical when writing alt text. Does the image provide meaningful information? Does it expand on the the surrounding text? If so, think about how to put that into words.
If an image links to something, then the function or destination also needs to be included in the alt text. An image will only have a function if it links to something.
Alt text = context + function
When determining appropriate alternative text for images, context is everything. The alternative text for one image may be vastly different based upon the context and surroundings of the image itself. Take, for instance, the following image:
The alternative text for this image might change immensely based on context, as demonstrated below.
Let’s say this is a stock photo that you used on a web page for aesthetic purposes. Since it doesn’t represent any important content and does not appear within a link, you would leave the alt text blank.
Let’s say this is a photo of a student from your program and is being used to demonstrate a common task by students on the “What is Clinical Laboratory Science?” page of your website. The alt text could look something like “Clinical Laboratory Science student, Julia Lee, in lab identifying DNA markers for genetic diseases.”
The context in which the above image is being used on this web page is vastly different than the above scenarios. The alt text applied here was “Example image of medical student working in a lab.” I wanted to ensure that someone with a screen reader had a basic understanding of what was in the image and that it was being used as an example so that they could follow along with this documentation.
Let’s look at a more complicated example of the same image as it is being use on the Allied Health Sciences (AHS) home page. It is being used under the “Divisions / Centers” heading to represent the Clinical Laboratory Science (CLS) division. The context of the image will significantly affect how the alt text is written.
Remember, good alt text is made up of the context + function of an image.
- Context: the image represents the Clinical Laboratory Science division so “Clinical Laboratory Science.” would be the proper alt text to fulfill the context side of the alt text description. However, since the text below the image conveys the context of the image, nothing is needed for this part of the alt text.
- Function: In this scenario the image is also a link, so it has a function. Whenever an image links to something, the function of the image must be presented in the alternative text. Again, “Clinical Laboratory Science” is the best choice since the link will take visitors to that web site. While the words “Clinical Laboratory Science.” in the alt attribute are redundant with the text that follows, in this case the redundancy is necessary to adequately describe the function.
- Final alt text: Clinical Laboratory Science.
To provide a further example, the alt text applied to the screenshot of the AHS home page shown above is, “Example screenshot of Allied Health Sciences home page showing a listing of divisions and centers.”
Need more? The following websites provide good working examples:
When Images Don’t Need Alt Text
Decorative images are images that provide no information and are used purely for aesthetic purposes. Decorative images do not need alternative text and should be marked as decorative. In the School of Medicine web system, leaving the Alt Text field blank will automatically mark an image as being decorative and will instruct a screen reader to skip it.
A few common types of decorative images include:
- icons, when there is text next to them that describes the icon’s purpose.
- divider lines that help break up content.
- images used to provide a mood or feeling.
- background images are often decorative.
Another instance where alt text is not needed is when the content that the image conveys is expressed in text surrounding the image, then an empty alt text is acceptable.
If you’re not sure whether an image needs alt text, go ahead and add it. It’s better to err on the side of caution and inclusion.
Caption vs. Alt Text
If an image you are using already has a caption, it might not need alt text. Read the caption and decide if it is enough. If the caption is too brief or missing key information, that information should be added to the alt text.
Any relevant information that is not describing the image itself, such as the source of the image, permissions, or copyright information, should be placed as a caption below the image, not in the alt text.
Search Engine Optimization (SEO) Benefits
Along with proper image title and file naming practices, including alt text can contribute to improved SEO. The content of alt text assists search engines in understand what your page is about. It also helps search engine crawlers properly index your images and improves your chances of gaining visibility for those images in search engine results.
Google’s article about images has a heading “Use descriptive alt text”. This is no coincidence. Google places a relatively high value on alt text. They use it to determine what the image represents and how it relates to the surrounding text. Google extracts information about the subject matter of the image from the content of the page, and alt text. Wherever possible, make sure images are placed near relevant text and on pages that are relevant to the image subject matter.
Do not cram alt text with keywords for the sole purpose of improving SEO. This will hinder the alt text’s true purpose of improving accessibility. Just focus on describing the purpose of the photo. SEO should be considered a side benefit and not the goal for writing good alt text.
Acronyms and Abbreviations
- It’s a good idea to spell out acronyms and abbreviations so as not to confuse any visitors that might be unfamiliar with them.
- For those using screen readers, acronyms and abbreviations can be particularly confusing, as they can be hard to understand when heard.
- In general, screen readers will typically spell out (or say each letter) of a word that is all uppercase.
Functional images are images that link to something. In these instances, the alt text must include both the content and function of the image. If the image is decorative, then only function is necessary. Convey the action or destination (of the link), not the description. For example, use “print this page” rather than “image of a printer.”
Example Alt Text for a Decorative Image with a link would be something like “Staff Listing.”
Example Alt Text for an Informational Image with a link would be something like “Diagram showing 200 inches of total snow; linking to monthly subtotals.”
Avoid Images of Text
Do not use an images of text when you can use true text to convey the same information. True text enlarges better, loads faster, and is easier to translate and customize. Also, since search engines cannot read text in images, this content will not be indexed.
Text in images is a bad user experience for many people including:
- People with visual impairments who need to resize or zoom text. Text in images can be problematic for screen magnification tools because images can decrease in quality and become pixilated when resized. Since the readability of text in images can be inconsistent, it is therefore discouraged.
- People using a screen reader, unless proper alternative text is provided.
- People who are translating web content into a different language.
- People using a text-only browser.
- People with unreliable internet connection where images might not load.
When images with text are used, they should be a generous size to mitigate pixelation when zoomed.
If an image is too complicated to describe with alt text, a lengthier description should be added to the page content and be located near the image. The image’s alt text should then describe where to locate that information.
Graphs and charts are examples of complex images where the information presented in the image should be duplicated in the text of the page. This ensures visitors using screen reader software don’t miss out on the content. It also helps sighted users who might have difficulty understanding the graph or chart.
Ways to represent the data in graphs and charts include the use of headings with either bulleted or numbered lists. You could also use tables to display the data.
If all the information in an image of a chart or graph is also included in the text of a page (as recommended above), you could add alt text similar to “Department of Medicine organizational chart; detailed data provided below” to the image.
- The Oregon State University Accessibility web site has a good working example of how to represent data from a chart.
- PennState demonstrates how to describe Flowcharts & Concept Maps.
- See how University Libraries displays both a graphical organization chart as well as a text version.
- UNC Office of the Chancellor opted for a text outline for their org. chart.
- The University of North Georgia provides both a text outline of their organizational structure as well as a graphical representation in a pdf (link at top of page).
- W3C Guide to Alt Text on Complex Images
Improving Image Accessibility with Alt Text
Learn what alt text is and when to use it or omit it.
4 min. 20 sec.
Writing Effective and Accessible Alt Text
Learn how to write alt text for more complex image use, such as charts, graphs, and image links.
4 min. 12 sec.
- Alt-texts: The Ultimate Guide – learn from a vision impaired web developer the best practices for alt text.
- WebAIM Alternative Text – WebAIM illustrates quality alternative text and can help you determine the content and function of an image.
- WebAIM’s Tutorial on Creating Accessible Images
- W3C Image Concepts – documentation on how to provide appropriate text alternatives for images.