Alternate Text: a Primer

At The College of Saint Rose, the Office of Services for Students with Disabilities coordinates academic support services for students with disabilities, such as extended time on tests, note taker support, and computer technology. Please seek their guidance and support in choosing texts for your course.

The following is informational only, and is intended to help faculty create more universally accessible content using the tools and technologies already provided by Information Technology Services. It is the responsibility of the course instructor to deliver course content in a way that is accessible by students using assistive technology.

Post-secondary institutions are required to grant all students equal access to course materials and information. When you use images in your PowerPoint presentations, class documents, or other media, you risk making your course inaccessible to certain groups of students. The way to make images accessible to all students is by creating alternative text, or alt text, which describes the image. Alt text makes images easier to handle for screen reader users, users with cognitive or learning disabilities, as well as users with slow internet connections or data restrictions (like mobile users). Additionally, alt text can improve search engine optimization. Alt text improves usability for all sorts of users, and is very simple to implement.

What is alt text?

Alt text should be a description of the image, but the actual description would vary based on the goal of the image. How would the message of your content change if you took the image out? What is the image conveying that is necessary to your course or lesson? The context of the image and its purpose in the course influences the alt text. A course on ecology or nature conservation could describe an image of a frog in a pond in a way that describes the entire pond’s ecosystem, whereas a biology course might describe the frog’s anatomy or the features of the frog itself.

In some cases, alt text is extremely straightforward.

Physics problem - tower of cylinders

For this physics problem, the screen reader user needs to know what the cylinder tower looks like. If the entire problem is an image file, the user cannot parse it, and therefore cannot even hope to solve it.

 

How do I write effective alt text?

A good tip for writing alt text is to look at the image for a few seconds, then look away and describe it. You may need to look again to be a little more specific about important details, but the goal is to describe the image in a simple, concise way. If you stare too long at the image, you’ll start capturing unnecessary details. Alt text should be 125 characters or less, since some screen readers will stop reading it after 125 characters and move on to the next piece of content.

Alt text works best as a written image description, however you do not need to write words like “image” or “picture of” in alt text – the screen reader will define the image as such.

Remember that you chose that specific image to serve a purpose. What about that particular image spoke to you? Why did you choose that one over the others available? These are details that are important for alt text, since they are not details that will be picked up visually by certain users. This guide to alt text from the Social Security Administration was co-authored by a blind user.

The main question you are answering with alt text is: if you take the image away, what would be lost from your message?

What about maps, art, or other more complex images?

In most alt text, you want to tell the users what is significant or important about the image. In alt text describing art, you want to let the users decide for themselves what is important. Art is subjective! You need to include the title of the work, the year it was created, the artist, and the medium. The rest of your slide or text would likely describe the work, its themes, etc., therefore it is not necessary to create a long, detailed alt text – but if you need to describe the image, consider writing something longer and giving it to the student separately. This kind of long-form alt text is specifically for users who cannot access information visually – any discussion of themes, use of lighting, etc would be something that all students would benefit from.

Shapes, WordArt, charts, or SmartArt (graphs, etc) tend to break in screen readers. Even if there is alt text listed, the screen reader doesn’t pick it up, and more complex shapes, like the following flow chart, prove more challenging still. There is no way to tell Word what the reading order should be, therefore a screen reader cannot parse how it should be read. Avoid them wherever possible, unless you are prepared to create a large explanation for screen reader users.

 Example of an inaccessible flow chart in Word.

For maps, again consider the purpose of the image. What is the content of the map showing the viewer? What will your user be doing with the information? If the map is something like a campus map, you could use an Excel table to direct people to locations within the cardinal directions (North, South, East, West). If the map is showing a trend, like a reduction in polar ice cap size, you could write a description of said trend, or you could write alt text making a statement, like “85.3% of New York State voted for X candidate in Y year.”

 

plant hardiness zone map

This map shows the plant hardiness zones of the US. Depending on your lesson, the alt text could describe the temperatures and their general geographical regions, or simply explain that different temperatures relate to different zones.

For more extensive help with complex images, Portland Community College is an excellent resource.

What’s the difference between alt text and a caption?

Alt text will be read aloud by a screen reader or displayed instead of the image if the image file does not load. A caption is any text you want to display with your image, which is meant for all users. Remember that a screen reader reads everything on the screen, including hidden alt text, so if you create alt text and then copy and paste it to caption the image, the screen reader will read both aloud to the user.

Don’t simply repeat the caption for the alt text. Use a short image description that makes sense when paired with the caption.

A yellow tree frog sits on a green plant in front of a blurred forest-like background.

There are four main species of tree frogs.

For this image, the alt text is “A yellow tree frog sits on a green plant in front of a blurred forest-like background.”

As you can see, the caption is “There are four main species of tree frogs.”

Do I have to put alt text on every image? What if some of them are merely decorative?

Screen readers may or may not ignore decorative images. You should mark them null by putting a space in the alt text box – if you choose not to write anything in the alt text box, the screen reader will alert the user that there is an image but not describe it.

Similarly, if an image repeats information, like a diagram that is explained in context in the text, leave the alt text blank (“ “) to prevent a screen reader user from listening to content twice. If the diagram is not explained in the text, you must explain it in the alt text.

Corporate logos should have alt text with the name of the corporation.

Starbucks

The alt text for this image is “Starbucks,” not “A white mermaid wearing a crown on a green field.” Remember, you are writing text for the content of the image and its function.

Don’t forget to provide alt text for images that you link to!

How do I put alt text on an image?

  • In Word: Right click an image, then choose Format Picture.
  • In HTML: In the <img> tag, use <alt=” “>. Put your alt text between the quotation marks
    <img src="dog.jpg" alt="A small breed dog wearing a green life jacket on a boat.">
  • In PowerPoint: Right click an image, then choose Format Picture.

Creating alt text only takes a short amount of time and it makes a big difference for those who cannot experience the visual cues of your content or message. It can also be an exercise in thinking more critically about why you have chosen the images that you have, or if you need them at all. Although it can seem daunting at first, it’s really very simple once you become familiar with it, and it spares your students from hassle. Luckily, alternative text is also one of the easiest accessibility strategies to find tips for around the internet!

 


Further reading:

 


Sources:

Alexander, Dey.”Text alternatives: a decision tree.” 4Syllables. Last modified December 15, 2010. http://4syllables.com.au/articles/text-alternatives-decision-tree/

“Alternative text.” WebAIM. Last modified September 3, 2015. http://webaim.org/techniques/alttext/

Eggert, Eric and Abou-Zahra, Shadi. “Images concepts.” W3 Web Accessibility Tutorials. Last modified March 2, 2015. https://www.w3.org/WAI/tutorials/images/

Sollinger, Stefan. “Five golden rules for compliant alt text.” AbilityNet. Last modified February 14, 2014. https://www.abilitynet.org.uk/blog/five-golden-rules-compliant-alt-text

“Higher Education and AEM.” National Center on Accessible Educational Materials. http://aem.cast.org/supporting/higher-education-aem.html#.V4Om9JMrKi4

Alexander, Dey. “Writing Text Alternatives for Maps.”  4Syllables.  Last modified June 4, 2010. http://4syllables.com.au/articles/text-alternatives-maps/

Morin, David. “Problem of the Week.” Harvard University Department of Physics.  Last updated May 31, 2004. https://www.physics.harvard.edu/academics/undergrad/problems