Alt Text and Long Descriptions

Alt text and long descriptions are both used to make images accessible to students who use screenreaders. In this guide, we describe some relevant content and formatting considerations for writing alt text and long descriptions. We share tips for efficiently remediating inaccessible images, and methods for adding alt text and long descriptions to various platforms. Before continuing reading this guide, brush up on the difference between alt text and long descriptions.

Note: This guide may be updated periodically as we learn more about what serves our students who use screen readers, especially in the context of biology.

Considerations for writing alt text and long descriptions

Alt text and long descriptions must have content that is relevant to the student’s understanding and be formatted properly so the screen reader can correctly read the descriptions. 

Content

Alt text and long descriptions should contain all important and relevant information about an image, depending on how the student is expected to interact with the image. 

Important and relevant content
The elements of an image that are important or relevant to the student may change based on context. Generally, the elements that might be included are: 
 

• Graphs: shape of the line, type of graph, several orienting points, minimum and maximum values of axes, units of axes, where the peak is for a normal curve, etc
• Cellular diagrams: orientation to the inside and outside of the cell, protein channels and ions that move through them, step-by-step description of processes like signal transduction or mRNA transcription, etc
• Ecological figures: description of how organisms are connected in a food web, overview of a landscape followed by a description of the component organisms, etc
• Experimental set-ups: different treatment and control groups, duration of time, genotype or phenotype of organism, behaviors exhibited by experiment subject, etc
• Multipart images should be labeled in an appropriate, easy-to-follow format. For example, an image of 4 answer options could be labeled “Option A”, “Option B”, etc. A process diagram might be labeled “Step 1”, “Step 2”, etc.
• Remember, alt text should be a broad description of an image, while a long description will be a more detailed account of the image.

Content to carefully consider
Some content may seem important to people who don’t use screenreaders, but is distracting or not relevant to people who do use screenreaders. 

• Color isn’t always as important as it may seem. Think about what the color represents and, if critical for understanding, write out the meaning of it. (ex: a surface that is glowing red to indicate that it is hot could be described as “a red-hot surface”)
  Positions of items: think about what you are communicating by including the position of an element - are you actually trying to indicate something about the relationship between elements? If so, describe the relationship. Are you trying to describe one answer option of four? The position (ex: “graph in top left corner”) isn’t relevant if each option is labeled as we recommend above.

Formatting

The format of the text can affect how the screen reader verbalizes the text. Think about how you would say the content out loud to make the most appropriate formatting choice for your context. You may need to balance multiple accessibility needs for students who do and do not use screen readers, as some of these formatting guidelines could be very distracting to students who do not use screen readers. Keep in mind which pages of your course are designed exclusively for screen reader users and which pages will be accessed by all students, and adapt these formatting guidelines based on your audience.

Below are formatting guidelines that assist the screen reader correctly read the content

• Numbers should be spelled out as words (ex: write “twenty”, not “20”). Dates should also be completely spelled out.
• Acronyms in capital letters with a space between each letter will be read as if you were spelling it (ex: “A T P” will be read as “aye tee pee”, while “atp” will be read as “ahtp”)
• Homographs, or words that are spelled the same but pronounced differently, can be tricky for screen readers. An example of this is “read”, pronounced “reed”, and “read”, pronounced “red”. Different screen readers have different capacities for selecting the correct pronunciation, so we cannot offer a general guideline for this other than to provide enough surrounding context that might help the screen reader.
• Punctuation affects where the screen reader pauses. Most screen readers will pause for commas, periods, semicolons, question marks, exclamation points, and paragraph endings.
  • Screenreaders may be set to read the punctuation (ex: saying “comma” when there is a “,”) depending on user verbosity settings.
  • The hyphen is a multipurpose punctuation mark. Eliminate ambiguity by spelling out what the hyphen means in context. Consider these bolded alternatives:
    “Four minus two equals two”
    “Event goes from ten to eleven A M”
    “A charge of negative two”
    If you have questions about specific punctuation or special characters, this inventory of screen reader pronunciation of special characters may help.

Getting it done efficiently

We recognize that instructors have full plates, and creating alt text for an entire course can be daunting. Below are some strategies you might use to go about this process systematically and efficiently.

Ensure you want to continue using the current images

Before you go through the effort of making alt text and long descriptions for a course, ensure that you like the images that are currently used. 

• Is there anything you would change about the images?
• Are there any images you would prefer to recreate using a program like BioRender?
• Is the complexity of the image appropriate for the level of the course?
• Is the image legible and colorblind accessible?

You can keep track of images with TLC’s Image Inventory Template.

Leverage TA support

Depending on the structure of your course, you may be able to ask your TA(s) to assist with creating alt text and long descriptions. This could be especially helpful for TAs that are interested in a career as an instructor, as being involved with an accessibility audit of a course could be a great project for their CV. In discussing this with your TA, you might talk about:

• How many hours a week should they spend on this?
• Which resources are top priority for remediation: powerpoints, quiz images, supplemental materials, etc?

If you do not have a TA for your course, or their contract hours are used up with their other duties, you may consider looking into options like undergraduate ATAs or student workers. Students involved in making content accessible can self-enroll in this Accessible Course Creator Canvas training.

Use AI tools to get you started

ASU has developed an AI-powered Image Accessibility Generator. This tool can help you create a first draft of alt text and long descriptions (called “image descriptions” in this tool). The output from this tool should be treated as a first draft and should always be reviewed by a subject matter expert to ensure that the description is correct, appropriate for the course level, and, in the case of quizzes and activities, describes the content relevant to the question. The generator will produce a slightly different output each time, so we recommend running the generator at least twice per image. 
Note: The AI generator does not produce the correct length of alt text, and does not consider how screen readers interpret non text characters. (Instructional one pager coming soon).
 

Adding alt text and long descriptions to the platform
 

General options

Most platforms currently have integrated ways for editors to input alt text. The Google, Microsoft, and Adobe suites have tutorials for adding alt text to images. If an integrated method for adding alt text is not available, consider adding a description of the image to the main body text of your content or integrating it as an image caption or figure legend.

Long descriptions can be more challenging to add, since most platforms do not have an integrated way to add these. Long descriptions can be added as an image caption or figure legend. 
 

Canvas-specific

Adding alt text to Canvas is easy, especially if you are following TLC’s Canvas File Management Best Practices. Alt text can be added to images in the Files page. This ensures that the alt text is added to all instances of that image on any page of your course.

Canvas currently does not support long descriptions, but TLC has developed a workaround to support students.

1. Create a page in Canvas titled “Long Description [Image file name]”
2. Add the long description you have written to the page. 

3. Link this page beneath the instance of the image in your course. 

   Quizzes
   The above method is not compatible with quizzes or exams that use proctoring softwares, as students are not able to open new tabs without being flagged. If you have images in your proctored quizzes and exams, try following TLC’s guide on Canvas Exams and Screenreaders.

Resources

Accessible images: alternative text guidelines 
Procedural Guidelines | ASU IT Accessibility 
Accessible online courses 
Designing for Screen Reader Compatibility | WebAIM 
Use Clear, Unambiguous Formatting and Punctuation | WAI