Complex Images – Going Beyond Simple Alt Text

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

In the previous post I tried to explain the basics about Alt Text for images used in online courses. However, some online course content may be far more complicated to describe, and thus require the instructor to provide much more alternative information than can be handled through normal Alt Text methods.

Complex Image Types

The following items represent the most common types of complex images used in online learning:

  • Numerical charts, graphs, and scatter plots
  • Flow charts
  • Organizational charts
  • Diagrams and illustrations
  • Infographics or similar text-heavy graphics such as word clouds
  • Maps
  • Cartoons and comics
  • Photos with a great deal of visual information that is important to the learning process

Starting with the Obvious

The “table” shown below is not a table at all. It’s an image of a table. A screen capture or whatever you want to call it. It’s a .jpg, not readable by assistive technology.

This flat image is illustrative of how difficult it would be to describe all this information.

You would not be able to include much information at all in the Alt Text attribute to describe this information. It is recommended that you not write a book (or even a paragraph) in the Alt Text attribute. One or two sentences probably is not going to cut it for a complicated graphic like this.

So, the obvious point here is to NOT take an otherwise difficult-to-read piece of learning content and make it even more difficult by turning it into a flat image that cannot be read by a screen reader.

However, imagine that the table above is not an image, but a properly constructed data table with headers and formatting that allows a screen reader user to tab through the information contained therein. Even then it would be a difficult task to understand all the info contained within.

More Examples to Consider

How about this infographic (shortened for space but still illustrative)? The text in this infographic is not machine readable, and many infographics have an enormous amount of text.

The real infographic is 3 times this long

Or how about this Org Chart?

Lots of information in the organizational chart

How about this column chart of student survey data?

Only 9 columns in this chart, but lots of information to explain.

Long Descriptions for Complex Images

In each example above, how you would go about describing this information to a student who cannot see the images? You can use some of the strategies described previously to write longer descriptions:

  • Long Descriptions, using the HTML <img> longdesc Attribute, can be provided on a separate webpage and be as long as you choose
  • Describing the image in the surrounding paragraph text also allows you to say as much as you like about the image
  • Image captions can be longer than Alt Text, but not super long

Or you can convert the image information into a more accessible format, such as adding a data table adjacent to the column chart or a turning a diagram into a tactile graphic.

Data Tables as Alternative Text for Charts

A properly formed data table is the best way to provide access to the data contained in an image of a chart, such as the column chart above. In a later post we’ll look at how to make an accessible data table.

The data in the table is real text, so it’s very accessible and provides an excellent alternate description for the chart image. Depending on the publishing platform, a data table might also offer the ability to sort and manipulate the data, so presenting the data in this way would definitely benefit all students.

Here is the data table for the column chart above

Survey ItemFY04FY05FY06
Online bookstore service5.285.715.67
Online info for financial aid5.325.485.71
Institutional responsiveness5.455.675.72
Priorities Survey for Online Learners for Lake Huron College. Student satisfaction ratings on a 7-point scale.

Before you decide on a Data Table

Consider the context and the learning goal. Is a data table needed? In other words, are the specific data figures and details an important part of the learning? Consider the following image that might be used in a tax class for an Accounting major:

Tax chart from IRS website, described in the surrounding text
IRS chart: Gross Collections by Type of Tax, Fiscal Years 2009-2018

How important are the details above. Is the exact amount of total tax collected in 2012 an important number? Almost certainly not (so says the former accounting instructor). So what is important? Of course it depends on the intent of the instructor, but possibly:

  • how much the total tax collected has grown over the 9 years
    • and yet business income tax collections are essentially flat over the same span
  • How income taxes on individuals in 2018 are approximately 8 times larger than the taxes collected on business income
    • or maybe how the difference in 2009 was 5 times and then it grew to 8 times by 2018
  • How “Other” taxes are 5 times larger than business income taxes – and what are those other taxes?

In other words, often times the gist of the information is really what you want the students to know. If your instruction is based around knowing the gist of the information in the chart, then you can provide a summary of the important things to know. However, if the goal is for students to be able to summarize the data in plain language – then they will need to be able to analyze the details in order to come up with their own summary or gist – thus the need for a data table.

Making that Infographic Accessible

You can find the infographic shown earlier in this post at the Big Hack website. What you’ll find there are two things I want to highlight.

  1. The text version of the information is provided directly below the infographic. That is their alternative text for the image, and they even included links to the sources of the information. This is very good.
  2. They also provide embed code “If you would like to share this infographic on your website.” This is where the accessibility typically falls apart.
    • This next section is important: “Please include a copy of the plain text version alongside the image for anyone who cannot access the information. Alternatively, you can signpost to this page saying there is a plain text version available.”
    • If you don’t do either of these things (and many people don’t), then you’ve just divorced the inaccessible infographic from the accessible alternative text. Don’t do that!

Before Wordle We Had Wordle

Here we have the lovely (jk) word cloud. Let’s assume that you teach some sort of language class and the exercise at hand is to look at how words from one language seep into usage in another language. Such as the words in the image above that are Spanish words commonly used by English-speakers. In other words, let’s assume that there is some educational value in the words in this cloud. That very often is not the case with word clouds.

This graphic was made years ago at Wordle dot net, which appears now to be in the deadpool, likely thanks to the NYT Wordle site. The original Wordle word cloud generator appears to be alive in an alternate site called EdWordle.

Word clouds are very strange from a web accessibility perspective. To make the word cloud, you enter words in plain text (usually copy and paste or provide a URL) and have the generator make a flat image that contains the same words in text that is not machine readable. Then you need to provide Alt Text so that the words in the image are available to assistive technology. To do that, you need to provide the original plain text words. That’s a strange workflow.

If your word cloud has no significant educational value, then you can safely mark it as a decorative image. If you have a word cloud that you really want to use in your course content or elsewhere, go ahead and do so, But, and this is a big but, you must provide all the important words and possibly the reasons that make those words important in plain text on the same page or as a Long Description page.

Last Example – An Attempt at Humor?

Here’s a poster I put together many moons ago.

This may be the best accounting joke ever told.

I don’t think that the regular Alt Text attribute (about 125 characters) will work for this image. Assuming that you don’t decide to mark it as decorative, how would you provide Alt Text for this image?

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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: