Text-Only Version of Web Accessibility Tutorial for Creating Descriptive Text for Diagrams, Charts & other Graphics
When PDFs, PowerPoint presentations and other documents get published to the Web, informational formats such as diagrams, charts, graphs and tables - created from formulas that require extensive and precise as well as logical and understandable description- pose the greatest concern for accessibility. These formats are used not only in the classroom, but in research reports & articles, so the necessity of getting input from their content expert—usually the faculty member who conducted the research or developed the instructional material—is imperative. It is the content expert that needs to consider how best to describe the content and meaning of such informational images to audio “readers” of the document when making it electronically accessible to the public.
Background
To begin, it’s important to understand that an assistive technology such as a screen reader perceives and articulates only the information available to it—written and coded text—so that if images like diagrams and charts are scanned, the only information rendered is the text not associated with the scan. Sighted persons experience the visual equivalent of this phenomenon when we see how the scanned images used to create a PowerPoint presentation or a PDF document look as a Web page (HTML) version—a service the search engine Google automatically provides—when published on the internet.
Consider this real example. Within a PowerPoint presentation, there is a scanned image of a pie chart depicting the range of and percentages associated with the agricultural resources contributing to the economy of the country of Lantapan. A second slide depicts a map situating Lantapan geographically next to the Philippines. The sighted viewer sees all the detailed information on both slides. The person using assistive technology, however, may only perceive the titles of the slides: “Research Setting: Rapidly-changing Agriculture-based Economy” and “Lantapan, Bukidnon, Mindano, Philippines,” effectively missing everything from the data in the pie charts to the line indicating the map scale.
In the graphic version of this tutorial, a screen capture of Google’s automatically-generated Web (HTML) page of the slides illustrates how the content communicated by the pie charts and map is now so minimal that they are combined into one Web page by virtue of the information now “missing” from the slides. In similar fashion, an assistive technology such as a screen reader will not have access to the important informational content and will communicate only the slide titles and subtitles to visually-impaired users. This underscores the need to provide descriptive, “alternative” text for most of your scanned images, whether used in PDF, PowerPoint or Web Page format.
Evaluating the Information in Your Images
Before creating alternative text for informational images, conduct a brief assessment of the nature and content of your image by examining three issues. First, determine:
1. Whether the information is presented in a written or alternative format elsewhere.
If this is the case, it becomes easy to copy, edit and paste your existing documentation into the Alt-text of the image in your new Webpage/PDF/PowerPoint document. Sometimes, for example, converting information in a pie chart into readable text is fairly easy. This can save you a lot of time re-entering data and other types of information.
For example, a pie chart depicting the percentage of Olympic Gold Medals
held by the top five countries may have been developed by data entered
and/or documented in written form in another document. Thus, rather than
describing the color used to depict a country and identify it with an associated
percentage, the author could simply use the original data documentation
(i.e. the source of the pie chart):
Total Olympic Gold Medals
o USA holds 44% of all gold medals
o USSR holds 21% of all gold medals
o Great Britain holds 13% of all gold medals
o France holds 12% of all gold medals
o Italy holds 11% of all gold medals
2. Whether the information in your diagram or chart is too extensive to describe easily.
The graphic version of this tutorial shows a PowerPoint slide that shows not only a photo of an Atmospheric Emitted Radiance Interferometer, but 3 detailed graphs as well. The first is a sample graph produced by the interferometer (of a clear sky and cloud downwelling emission), the second and third of which provide what appears to be a thermal readout of what is titled “continuous atmospheric profiling—temperature and water vapor.” The reliance of these last two images on numerical data imposed over line drawings and color variations depicting the distribution of temperature and vapor makes them extraordinarily difficult to provide a concise verbal description of the kind necessary to make the slide accessible to all users.
If this is the case, it may be a better use of resources to use the services of your local Disabled Student Services Center, such as the McBurney Center on UW-Madison’s campus. Remember, though, often such a Service Center as McBurney needs the help of a content expert (for instance, a meteorologist to explain the meaning of data on a chart of a high resolution radiometry such as the one above), and that they also need time to process requests for assistance.
3. Whether some of the information can be eliminated from the accessible document.
The graphic version of this tutorial shows an illustration relying on a map of the Northeastern United States, which contains outlines of the states and uses color to depict the KiloVoltage power emitted by local power stations. The map has an inset to help viewers associate the scale of color with specific voltages levels ranging from blue (6000 bu) to red (7050 bu).
The reality is that ome information such as color, texture or even values can be eliminated from the description of a diagram because it only reinforces, rather than adds, information central to the meaning of an image. You can keep your description succinct by including only the information absolutely necessary to interpret the image. A key question to ask yourself is whether or not a sighted reader will gain additional information from your description that an audio reader will not. If so, then eliminate or adapt different elements of your description.
For example, the slide previously described could be done so succinctly
with the following copy after its title:
Figure 3: Voltages Magnitudes at 115/138 KiloVolt Buses in New York and
New England
The highest voltage magnitudes (7050 bu) are concentrated around the Bay of Maine, Penobscot Bay and along the St. Lawrence seaway in northern New York state.
The lowest magnitudes (6000 bu) lie along the southern border of New York state and into Pennsylvania, as well as in most of Vermont.
From south to north, most of Massachusetts, Southeast New York, North Central New York, New Hampshire and central Maine have mid-magnitude voltages (6050-7000 bu).
Effective Description
After an initial analysis of your informational image, you need to consider
exactly what the purpose of that image is in the context of its presentation.
In addition, consider which of its features (elements, data, drawings,
etc.) provide the most explanatory power in communicating your intended
meaning.
Charts & Graphs
Charts (pie & map) and graphs are one of the most commonly used information
formats to illustrate proportion and distribution of data. Charts and graphs
are actually among the easiest of informational images to make accessible
through textual description and don’t always require a content expert
to develop. We’ll examine two methods, Option 1, which is more suited
to being created by the content expert than the other, Option 2.
To begin:
How would you describe a chart/graph effectively? Consider the criteria needed for the effective description and interpretation of informational images.
1. Identify the purpose of the chart. What kinds of data and relationships between variables is it supposed to communicate to the viewer? Does your chart’s heading communicate that purpose?
2. Determine which specific pieces of information are the most significant. Those are the elements to which you need to first direct the viewer/reader’s attention. We report data to communicate ideas such as growth, decline, distribution and other cause-effect relationships. Consider what it is you are trying to achieve in communicating this data to your intended audience.
3. In what order would you present that information—declining in significance from most to least—so the viewer best comprehends what is being communicated? When managing variables such as:o Number and titles of categories represented (sets of data, time, space, etc.)
o Media used to convey significance (color, labels, texture)
o Relationships represented
? Distribution
? Cause-effect
It generally enhances the clarity of your description and chance of the viewer/reader understanding your intended meaning if you begin by explaining the relationships represented. A brief explanation of the relationships provides a kind of “frame” for the subsequent information (categories, media) you describe and thus makes an accurate interpretation of the image likelier. Like the picture to which we refer when putting puzzle pieces together, viewers/readers are able to better position the specific pieces of information relative to the bigger “frame” and to each other.
Exercise A--How would you describe this image effectively?
In the graphic version of the tutorial, the previously mentioned PowerPoint slide with two pie charts illustrating the agricultural lands contributing to Lantapan’s economy is offered as the subject of the exercise. If you run the two charts through the criteria listed above, you get the following results:
1. The purpose of these two pie charts is to provide quick evidence of the changes in Lantapan’s agriculture-based economy.
2. The easiest way to make the significant information accessible is to literally identify and list the resources and associated percentages on each chart, as illustrated in Option 1. Another approach, explained in Option 2, might begin by summarize the most essential relationship being identified by the data presented in the chart—the differences in each category over time.
Option 1 contains this description as its alternate text: Pie Chart 1: Lantapan land use 1973: 52% Dense Forest; 18% Corn and Vegetable; 8% Rubber trees or pasture; 7% Corn and Sugarcane (mainly sugarcane); 7% Shrub and tree (other distribution); 3% Corn and Sugarcane (mainly corn); 3% River and creek; 2% Shrub and tree (besides forest); 0% Bare soil; 0% Lowland patty field.
Pie Chart 2: Lantapan land use 1994: 29% Dense Forest; 35% Corn and Vegetable;
0% Rubber trees or pasture; 9% Corn and Sugarcane (mainly sugarcane); 7%
Shrub and tree (other distribution); 5% Corn and Sugarcane (mainly corn);
3% River and creek; 10% Shrub and tree (besides forest); 1% Bare soil;
1% Lowland patty field.
Because such data is generally available in other documents in text form,
this is an easy method. There are two disadvantages to it, however. The
first is that there is simply a lot of text. A second issue is that a
person using a screen reader will have difficulty telling which percentages
go with which category unless they listen carefully to the structure
of the list, focusing special attention on your use of punctuation (the
semi-colon in this case), which generally serves as a cue for association.
3. Consider the order in which you present information. A second option is to highlight the differences in resource categories over the years based on their significance, as shown in Option 2. The advantage of this is that the “need to know” information is highlighted, as well as the significance of the information to the designer’s message: Lantapan is developing. This method’s primary disadvantage is that is may take a little more time to develop a succinct description than simply list the pre-existing information on a chart.
Option 2 contains the following description as its alternate text: Between 1973 and 1994, Lantapan’s land use moved from agricultural practices that damaged the environment to a more sustainable economy. Dense Forest diminished from 52% to 29%; Corn and Vegetables grew from 18% to 35%, as did Corn and Sugarcane (mainly sugarcane) from 7% to 9% and Corn and Sugarcane (mainly corn) from 3% to 5%. Shrub and tree (Before forest) grew from 2% to 10%. The harvesting of rubber trees and pasture disappeared from 8%. River and creek stayed the same at 3%, as did Shrub and tree (other distribution) at 7%. Bare soil and Lowland patty fields were restored from 0 to 1%.
Diagrams
Another commonly used type of informational image is the diagram. Diagrams tend rely more on pictorial images than charts & graphs, which usually are used to represent data. Diagrams often contain more abstract content than charts and graphs.
One of the most common issues with diagrams is that they provide an abundance of often unnecessary information to the reader/viewer—it’s easy to assume “more is better” when it comes to communicating information. Such abundance may actually interfere with the reader/viewer comprehension of information, however, and diminish the clarity of the message the designer of the diagram intends to communicate.
How would you describe a diagram effectively? Consider the criteria for effective description and interpretation of images.
1. Identify the purpose of the diagram. What is it supposed to communicate to the viewer?
2. Determine which specific pieces of information are the most significant. What information –at a minimum—does the viewer absolutely need to know to understand the concept, process or object being communicated? These are the elements to which you need to first direct the viewer/reader’s attention.
3. In what order would you present that information—declining in
significance from most to least—so the viewer best comprehends what
is being communicated? When managing variables such as:
a. Labels & titles of items represented
b. Function diagram serves or Idea diagram conveys
c. Media used to convey significance (color, labels, texture)
d. Relationships represented
i. Logical explanation
ii. Cause-effect relationships
Think about which types of information you could leave out.
Exercise B--How would you describe this image effectively?
In the graphic version of our tutorial is a complex diagram titled “Mechanism of Intestinal Acting Agents,” which use as the subject of this exercise. The illustration has no less than three sets of arrows showing the flow of food intake, bile acids and cholesterol in the digestive process. It relies heavily on a combination of shapes and differences in the font size and color of text labels to communicate information as to what is a body part, a chemical or process.
The purpose of this diagram is to provide an explanation of the different components (body parts, chemicals, etc.) used in the process of digesting food. Note it is quite complex, relying upon labels, spatial arrangement, arrows and color to communicate the process to viewers.
1. Assessing which of these components make up the most significant information involves examining the process as a whole before identifying which communicative markers or media (space, color) should be included or left out of the diagram’s description. In this case, the need-to-know information includes the body parts and chemicals, their role in digestion and the order in which each is involved in the digestive process.
2. The order in which that information is best articulated is made challenging here by the fact that there are several processes involved with digestion, resulting in a multi- rather than uni-linear path depicted in the diagram. In determining which pieces of information can be left out, it seems clear that while the names of each component are necessary to a description, their spatial layout as depicted on the diagram is not. Similarly, as long as the relationship and role of each component is explained in a logical, cause-effect order, descriptions of the color used to depict them in the diagram are unnecessary.
The following copy is an example of a relatively succinct written description of the diagram “Mechanism of Intestinal Acting Agents” that could be used as its alternate text: Bile, produced by the liver, breaks down food in the small intestine. Food is converted into plant stanols, from which the enzyme Ezetimibe extracts cholesterol, transporting it back to the liver. Excess plant stanols get further broken down into fecal sterols, but not before producing bile acids, which, assisted by the enzyme T-BAS, are transported from the intestine back into the liver.
Clearly there is good reason to be concerned about charts, graphs and diagrams that appear in PDF or PowerPoint presentations, for once published to the Web, the supposedly “easy” conversion of those documents into HTML fails to make them accessible to many users. But by assessing whether you already have the necessary information available, need the assistance of your local services for disabled students or can reduce the volume of information needed in your images, you can save a lot of time when developing effective descriptions.
In summary, remember that the effective description of charts, graphs and diagrams involves:
1) communicating the purpose of your image
2) determining which pieces of information are the most significant to
achieving your purpose
3) establishing a logical, user-oriented order to the information you communicate
through your images.
Remember that, as the content expert, you are in the best position to determine these criteria and develop an effective description to accompany the informational images you use so they are accessible to all.