Barry Dahl dot com

This is post #3 in a series of twelve posts intended to help you improve the accessibility of your online courses.

What are Alternate Text Descriptions?

For a sighted person, images related to the learning content can be very informative and valuable. A picture’s worth a thousand words and all that stuff. So let’s assume that you have included several images in your online course; such as images in content pages, in discussion posts, possibly in a quiz question, and so on. Let’s also assume that one or more of your students has a visual impairment and uses a screen reader (assistive technology) while accessing your course.

Visual impairments make it difficult or even impossible for the student to see the image and comprehend the information you are trying to convey with that image. That’s where Alt Text come into play. For this series of blog posts, I will refer to Alt Text as shorthand for Alternate Text, also often called Alternative Text.

Alt Text is the text-only information that is associated with an image for the purpose of providing information that is equivalent to the image itself.

Informative Images or Decorative Images?

Informative Image Example

Many images used in online courses are informational in nature; which means that the image conveys information that is part of the learning activity in which it is used. For example, in an Entomology course on Bees and Beekeeping, this image of a honeybee pollinating a sunflower is most likely an important image for the learning process, or at least it could be. Students who can see the image won’t necessarily know what is educational about it, but they might. In other words, the educational purpose might be obvious to someone who can view the image, but it definitely won’t be obvious to someone who can’t view the image. This is where Alt Text comes in. More on that in a minute.

Decorative Image Example

A decorative image in an online course is one that does not convey important educational content. They are often used for layout purposes, humor, or just what could be called eye-candy. For example, assume that you want to have a little fun with your students so you post a News item stating that today is National Hoagie Day, and post a photo as well (maybe to spark a debate as to whether it should be called a hoagie, a sub, a hero, or a grinder). A student who is unable to view the image is at no educational disadvantage by missing this image. There is no need to explain the image to the student either. Your text announcing that it is Hoagie Day is sufficient for them to see your humorous side.

Alt Text for Informative Images

For a student who cannot view the image, the informational content must be explained in real text in some way that is accessible to the student using assistive technology, typically screen reading software. That readable text can be in the form of:

• An alt text description that is part of the HTML code, but is not viewable on the screen.
• A descriptive caption for the image that can be read by sighted people and read by screen readers.
• A description of the educational content conveyed by the image in the surrounding paragraph text.

For the honeybee image shown above, we would need to know the context in order to determine what should be included in the alt text or caption or surrounding paragraph. Possibly the point has to do with the fact that sunflowers are self-pollenating, which might beg the question of whether the honeybee is adding any value by visiting the flower. Let’s make that assumption for this example. Here is one possibility for the alt text:

Even though sunflowers are self-pollenating, research shows honeybee activity can improve crop yields.

Is that the best Alt Text for this image? We don’t know, that’s a trick question. The answer of what is the best alt text is contingent on the point of the learning conveyed by the image. That’s where your professional judgment comes in.

However, there is information in the Alt Text above that is not obvious in the photo. The info about bees improving crop yields is a piece of learning that would be important to all your learners. If it is only contained in the Alt Text, then sighted users could be at a disadvantage. More on this at the end of the post.

Effective practices for writing Alt Text

Some basic guidelines:

• Do not include “picture of” or “image of” in the Alt Text.
  • A screen reader will automatically announce that it has come to an image. So an Alt Text “Image of a honeybee” would be read aloud by a screen reader as “image, Image of a honeybee”.
• Using correct grammar can enhance the experience for screen reader users:
  • Capitalize the first letter.
  • End whole sentences with a period.
• As a general rule of thumb, keep Alt Text prose to about 100-200 characters or less.
  • Some people say that there is a limit of 125 characters or similar, but my research shows this not to be true. It might have been true once upon a time, but browsers and screen readers change all the time.
  • Look at using other methods for longer descriptions of an image.
• Many images contain embedded text which is not readable by assistive technology.
  • If any embedded words are important, make sure they are included in the Alt Text.
• As illustrated with the honeybee, don’t include unique information in the Alt Text.
  • Don’t put sighted users at a disadvantage by putting important information ONLY in the Alt Text.
• Don’t repeat yourself.
  • If the information is already available in the content within the proper context, repeating the same information in the Alt Text is a waste of the learner’s time.

You’re not trying to improve SEO in your online course

SEO is shorthand for Search Engine Optimization. You can visit many websites where they school you on writing good alt text for an image on a website. They tell you to be as descriptive as possible. Refer back to the bee and sunflower photo. Here are two possible Alt Text outcomes:

1. Honeybee sitting on the outer edge of the disc florets of a bright yellow sunflower.
2. Even though sunflowers are self-pollenating, research shows honeybee activity can improve crop yields.

Number 1 is very descriptive of the image. But what is the educational value of that text?

Number 2 conveys information that is relevant to the course and may be made more memorable including the image.

For webpage optimization, many web developers will fill the Alt Text for images with a bunch of keywords since search engines typically scan image Alt Text. Keep in mind that an online course has a very different purpose, so please don’t dump a bunch of keywords into your Alt Text.

Alt Text for Decorative Images

Images that are for decorative purposes do not need to be explained to students with no or low vision. To properly communicate the fact that the image is decorative, you need to use null alt text so that assistive technology can inform the student that the image is not important to the educational content of the topic.

Code example of null alt text: <img src=”yummy-hoagie.jpg” alt=””>

It is important to understand that null alt text (as shown above in the code with alt=””) is not the same as no alt text, where the alt text attribute is completely missing. If null alt text is entered, assistive technology will ignore the image altogether, which is a good thing since it conveys nothing important. However, if the alt text attribute is completely missing, then the student will be told that there is an image, and they will wonder what they are missing since there is no alt text to explain the importance of the image.

How do you determine whether an image is informative or decorative? I see many examples of where authors error on the side of caution. To me, the side of caution is to write Alt Text for an image just to be on the safe side in case it’s not merely decorative. I might be one who pulls the decorative lever more often than others. If it doesn’t add to the learning at hand, or if the info conveyed by the image is available in plain text somewhere else in the materials, then I’m likely to call it decorative.

Why not add Alt Text anyway even if the image is decorative?

Students using assistive technology such as a screen reading platform already have hurdles to clear in order to learn the course content. Anything that saves them time or doesn’t muddy the waters is a good thing for them. Adding Alt Text to a decorative image may even be a signal to the unsighted learner that there is something more important about the image than intended by the instructor. If you decide the image is decorative, then use the null Alt Text attribute and let the learner skip over the image entirely. It’s the learner-friendly thing to do.

Should decorative images even be a thing in online courses?

I’ve had several people ask whether it’s a good practice to just completely leave out decorative images. One school of thought is that if the images don’t enhance the learning in any significant way, then why have them at all?

Short answer: Decorative images are fine

Longer answer: Decorative images are fine as long as they are marked properly with the Null Alt Text attribute. Some of the main reasons for using decorative images include:

• adding an icon next to a text link to draw attention or increase the clickable area;
• the image is already described by surrounding text;
• adding borders, spacers, and corners for visual styling;
• because you want to include some “eye-candy”.
  • just because an unsighted student can’t appreciate the eye candy isn’t a reason to take it away from all learners (remember, there’s no enhancement of the learning with these images).

What about Captions?

Some software platforms make it easy to enter an image caption, while others require you to add the caption coding directly into the HTML for the page. If you know how to do this, it is an effective practice to put this information in the caption for the benefit of all students. If you enter the text in a caption, then do not repeat it in the alt text attribute.

If your authoring platform doesn’t provide an easy way to insert captions, then you might want to consider the other possible ways to provide your learners with the important info in the images.

Don’t Forget About Surrounding Text

Many experts will suggest that the best practice, and in this case I really do mean best, is to put all of the relevant information in the surrounding text. For the sunflower and honeybee photo above, that would mean that everything that is educationally important about that image should be explained in the on-page text that accompanies the image. Sighted students and those using assistive technology would all have access to the same information. If all the information is conveyed in the surrounding text, then it is appropriate to not repeat that info in the alt text, at which point the image can be treated as decorative for students using assistive technology.

Alt Text: a Useful Point-of-View, IMO

I like to think of Alt Text as if it’s living “behind the photo.” If you were viewing a physical photo album, it would be something that someone wrote on the back of the photo, or on the page behind the photo. Unless you know it’s there, you’ll never know what it says.

Of course it’s possible for a sighted student to find the Alt Text for a digital image on a webpage, but it’s not easy nor intuitive. Remember, the mouse over popup is NOT the Alt Text.

Refer back to the suggested Alt Text for the bee and sunflower. There is information in the Alt Text that is not obvious in the photo. This is a clear example, IMO, of a case where you should not use the Alt Text code attribute but should either insert a caption or put that information into the surrounding text on the page. That way the info is readable by sighted users as well as learners using assistive technology.

Some recommended resources for more info on Alt Text for simple images:

• Univ. of Washington: Making Images Accessible
• Accessibility and Usability at Penn State: Image ALT Text
• Harvard Univ.: Write good Alt Text to describe images
• WebAIM: Alternative Text

Directory to posts in this series:

1. Improving Accessibility of Online Courses – the why
2. What do Educators Need to Know about VPATs?
3. Alt Text for Simple Images in Online Courses
4. Complex Images – Going Beyond Simple Alt Text
5. Finding Videos with Good Captions
6. Captioning Videos for Your Online Courses
7. Improving the Accessibility of your HTML Content Pages – Part 1
8. Improving the #A11y of Your HTML Content Pages – Part 2
9. Making Word Documents Accessible for Online Learning
10. Making PowerPoint Files Accessible for Online Learning
11. Using Web-based Tools in Online Learning – #A11y
12. Six More Tips for Making Online Courses Accessible

Filed under: accessibility |