Alt Text
Individuals who cannot view images rely on alternative text (also known as "alt text"). Alt text provides a brief description of an image and is designed to convey the image's content to users who are unable to see it, such as those using screen readers or Braille devices. Alt text should be concise and sufficient to describe the image without including excessive detail. Screen readers typically announce "Image" and then read the associated alt text aloud.
Examples of good Alt Text:- Class of students sitting at desks paying attention to a female instructor teaching at the front of the classroom.
- Aubie the Tiger giving high fives to children outside of the Auburn University football stadium.
- Diagram showing the stages of mitosis in a eukaryotic demonstrating how one cell divides into two cells.
- Young man wearing a blue graduation gown, smiling and tossing a graduation cap in the air.
Important Note: You do not need to state "in this photo..." or "image of ...."
Examples of poor alt text:
- Image428.jpg
- Picture of people
- [blank]
- student_center_1
Image Types and Purposes
Simple images are a type of "functional image" and must be described with alternative text (or "alt text"). Alt text consists of a brief description that conveys the content of the image and is generally not visible to individuals who can see the image but is accessible through assistive technologies such as screen readers or Braille displays. Additionally, browsers will present alt text when an image does not load properly. Most authoring tools include functionality to add or modify alt text, typically accessible upon adding an image or through an image properties dialog.
Example Alt Text for this image: Smiling female graduate crossing stage with diploma in one hand and giving a thumbs up.
Complex images like graphs, charts, or diagrams often require more detail than alt text can effectively provide. Place comprehensive descriptions elsewhere on the page or a separate page. Include key points or structured data with headings, lists, or tables for easier exploration. This approach benefits all users when deciding where to locate image descriptions.
Review the Additional Resources section below for links to helpful resources for writing effective descriptions for complex images.
Example Alt Text for this image: Infographic of decision tree for making ethical decisions.
Decorative images do not add any meaningful information and serve only an aesthetic purpose. Screen readers should not announce decorative images. Techniques for concealing decorative images from assistive technologies are outlined in the Tools section below. If such images are not properly hidden, screen readers may announce the image's full path and file name, resulting in a distracting and inefficient user experience.
For images that serve purely decorative purposes and convey no informational content, descriptions are unnecessary. Nonetheless, it is important to implement appropriate markup to ensure that screen readers correctly identify and bypass these images.
Whenever feasible, use text rather than images to convey written content. When enlarged, images containing text may lose clarity, making them harder to read, including for users with visual impairments. Additionally, some readers adjust the appearance of text—such as font size, colours, family, line spacing, or alignment—to improve readability. Text within images does not allow for such customization.
Tools for Alternative Text
Simple Images
Authoring tools such as Microsoft Word and PowerPoint include an option to add Alt Text to images. To access the dialog box to enter Alt Text use one of the following options:
- Right-click an image and select View Alt Text from the pop-up menu, or
- Select the image, choose Picture Format from the menu, then select the Alt Text button from the ribbon.
If no Alt Text option is available, the pop-up menu typically includes a search field. Typing “Alt” into the search field will typically surface the Alt text option. To add alt text, type a brief description in the space provided.
Decorative Images
Remember to choose the Mark as decorative checkbox if the image is purely decorative and does not communicate any meaningful information. When this box is checked, a screen reader technology will ignore this image and reduce confusion for the user.
Rich content editors such as Canvas include support for alt text on images. The following examples describe the process generically, with screen shots from Canvas. However, the same process applies with slight variations in other web content authoring environments.
Simple Images
When adding an image, locate the field or tab labeled “Alt text” or equivalent, and enter a short description into the field.
If there is no prompt for alt text when first adding the image, right-click on the image after it’s been added and select “Image Options” or equivalent, then look for the image properties dialog box for a prompt to enter the “Alt text”.
Decorative Images
In many Rich Content Editors like Canvas, a simple checkbox is available to indicate when an image is decorative, as shown in the example below.
-
Leave the "Alt Text" field blank. Some of these editors will automatically tag the image as decorative. Use an accessibility checker to verify the automatic tag was applied. If it did not, use one of the remaining techniques.
-
Switch to "code view" in the editor to access the underlying HTML, and add an empty alt attribute (alt="") to the <img> element.
-
Avoid using decorative images.
Simple Images
Add alt text to the <img> element using the alt attribute, as in the following example:
<img src="azaleas.png" alt="Azaleas in bloom on the Auburn campus">
Decorative Images
Use one of the following options to indicate to a screen reader to ignore a decorative image:
-
Avoid using the HTML <img> element for decorative images; instead present the image as a background-image using cascading style sheets (CSS).
-
If using the HTML <img> element, add an empty alt attribute (alt="").
Additional Resources
-
Images Tutorial – from W3C, includes recommendations and examples for all types of images
- Describing Figures – guidelines with examples from the ACM Special Interest Group on Accessible Computing (SIGACCESS)
-
Effective Practices for Describing STEM Images – guidelines with examples from The National Center for Accessible Media (NCAM)
- WebAIM Screen Reader User Survey Results – demonstrates universal design by presenting data through graphs, tables, and text, accommodating diverse information processing needs.
WCAG 2.1 Success Criteria
The alt text guidelines described in this section map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1:
- 1.1.1 Non-text Content (Level A)
- 1.4.5 Images of Text (Level AA)
