How to Describe Complex
Images for Accessibility
Presented by the DIAGRAM Center
Bryan Gould
WGBH National Center for Accessible Media
1.
2.
3.
4.
5.
6.
Introduction
Describing Complex Images: Guidelines
Describing Complex Images: Examples
Adding Image Description to Digital Media
DIAGRAM Tools & Resources
Alternatives: Recorded, Tactile, Haptic &
Smart Images
Digital Image And Graphic Resources
for Accessible Materials
• 5-year Research & Development Center
• Funded by Department of Education, Office of
Special Education Programs (OSEP)
• Awarded to Benetech along with partners:
• NCAM
• U.S. Fund for DAISY
(some) DIAGRAM Activities
•
•
•
•
•
•
•
•
•
Description guidelines training
Product evaluation matrices
User survey on reading technologies
Report on metadata images
SVG and 3D printing evaluation
Audio-Tactile usability study
POET
Standard development: content model
Collaboration with Mathematics eText Research
Center (MeTRC, U. of Oregon)
diagramcenter.org
NCAM (est. 1993)
Research and Development
–develops technical solutions
–conducts research
–promotes advocacy via outreach
–supports national policy decisions
Accessible Digital Images
iBooks
WEBSITES
BOOKSHARE
ASSESMENTS
2. Describing Complex Images:
Guidelines
How to Write Descriptions
• Be a subject matter expert.
• Write well and take care to review spelling, grammar and
punctuation.
• Monitor length, vocabulary and sentence structure to
minimize cognitive load.
• Review image in context to ensure the proper tone,
structure and vocabulary.
• Have access reference materials.
• Descriptions should be reviewed by someone who has not
seen the image, to ensure clarity and effectiveness.
How to Write Descriptions
The description author should consider three basic questions
about each image in order to give effective and efficient
description.
1. Why is the image there?
2. Who is the intended audience?
3. If there is no description what will the viewer miss?
STEM Description Guidelines
Four years of NSF-funded research
produced guidelines for making
STEM images accessible.
STEM = Science, Technology,
Engineering and Math
STEM Description Guidelines
Brevity
Data
Clarity
Drill-Down Organization
Tables, Lists & MathML
3. Describing Complex Images:
Examples
Parts of a Complex Description:
1.
2.
3.
4.
Title
Construction of the Image
Summary or Overview
Data
Title
The line graph is entitled "FOREIGN TRADE OF COUNTRY X, 1968 through 1980,
in United States dollars".
Construction
There are two lines on the graph, a dashed line labeled "Exports" and a solid line
labeled "Imports".
The vertical axis is labeled "Billions of Dollars," beginning with zero to eighteen, in
increments of 2. Note: one billion equals a one followed by 9 zeros.
The horizontal axis is labeled "Year" and lists all the years from 1968 through 1980.
Summary
The Exports line begins in 1968 at 3 billion dollars, rises steeply, then drops, then
shoots up to 15.5 billion, then trails off to 10 billion in 1980.
The Imports line begins in 1968 at 2 billion and rises steadily to 8.75 billion in 1980,
except for 2 minor dips.
Data
The data is provided in the following table. Figures are in billions of dollars.
All data are approximate.
Year
Imports
Exports
1968
3
2
1969
3
2.3
1970
4
2.4
1971
5
3.1
1972
10
2.5
1973
13
3.3
1974
14.2
3.7
1975
9.7
4
1976
9.5
5
1977
15.5
5.7
1978
12.5
6.3
1979
12
6.3
1980
10.2
8.6
Common Types of Complex Images
Straight to Table
Straight to List
Tons of Info!
Tons of Words!
Illustrations & Cartoons
Straight to Table
Table titled, Expanding Education/Decreasing
Illiteracy
Year
School Age Population
(5 to 18 Years of Age)
Illiteracy (% of total
population)
1870
12,000,000
20.0%
1880
15,065,767
17.0%
1890
18,543,201
13.0%
1900
21,404,322
10.7%
1910
24,360,888
7.7%
1920
27,728,788
6.0%
Straight to Table / List
A bar chart shows funding in billions of dollars per
year (2010)
•
•
•
•
•
•
•
•
Marshall Plan (1948-1951), $27 billion
Global Environment Facility lending (2009), $1 billion
Bill and Melinda Gates Foundation lending (2009), $3 billion
World Bank lending (2008), $39 billion
Foreign Aid budget of developed economies (2008), $125 billion
Millennium Development Goals financing gap (2003), $105 billion
Investment needs for universal modern energy (2009), $37 billion
UNFCC commitment, $100 billion
Straight to List
A flow chart titled Adding an article to Wikipedia
1.Search Wikipedia
2.Is it found?
• Yes – think of another term and return to Search Wikipedia
• No – Is there a related term?
• No – Create a new article
• Yes – Create a redirect
Straight to List?
A diagram titled, basic overview of energy and human life.
Going in the body:
• Chemical energy
• Carbohydrates
• Fats
• Others
Inside the body:
• ATP
• body’s “energy currency”
• metabolism
Leaving the body:
• chemical waste
• carbon dioxide
• water
• heat
Unnecessarily
Complex!
A diagram titled, basic overview of energy and human
life. The diagram shows chemical energy
(carbohydrates, fats and others) going into a human
body. Inside the body are ATP (body’s “energy
currency”) and metabolism. Leaving the body are
chemical waste (carbon dioxide and water) and heat.
Tons of Info!
Title
Some
Little
or
None
Parts of a Complex Description:
1. Title
2. Construction of the Image
3. Summary or Overview
4. Data
Much
Table
Map
Title
Provide map as
separate list.
Map of Electoral Votes
Democratic: Won all states except
those listed below (California was
the only state to divide its electoral
votes: 2 to Democratic and 11 to
Progressive.)
Progressive: Washington, South
Dakota, Minnesota, Michigan,
Pennsylvania. (California: 11 to
Progressive and 2 to Democratic.)
Republican: Vermont and Utah.
Socialist: None
States Won
All except those listed below
WA, SD, MI MN, PA. CA…
VT and UT
None
Alternative
approach: add map
info to the table as a
new column.
Break it down into parts
1. Summary of Time Zones
2. Summary of railroads by 1870, in relation to time zones, name
key cities and the one transcontinental line (outlier.)
3. Summary of railroads by 1890, in relation to time zones, name
key cities.
Tons of Words!
Break it down into parts
1
2
3
This is a vertical info-graphic, containing a
header, footer, and three main sections between
them.
The header reads, 'FIND OUT IF YOU HAVE
HEPATITIS C - IT COULD SAVE YOUR LIFE.
SOME PEOPLE DON’T KNOW HOW OR
WHEN THEY WERE INFECTED.'
The first section below the header reads, "BORN
FROM 1945-1965? People born from 1945-1965
are 5X MORE LIKELY TO BE INFECTED
WITH HEPATITIS C. 3 OUT OF EVERY 4
people with Hepatitis C were born between these
years.'
The next section contains a silhouette of a
human figure with the liver highlighted. Two
text circles connect to the liver with lines.
•The text in the first circle reads, 'Up to 75%
of people living with Hepatitis C DO NOT
KNOW THEY ARE INFECTED.'
•The second circle has an hourglass and text
that reads, 'Many people can live with
HEPATITIS C for DECADES WITH NO
SYMPTOMS.'
Below the two text circles is a banner across
the human silhouette’s abdomen. On the left
side of the banner is a small to-do-list with a
single item labeled 'Hep C Blood Test'. It is
check-marked off. The banner text reads,
'CDC recommends anyone born from 19451965 GET TESTED'.
The final section before the footer has two columns,
representing a choice of two paths - one, to get Tested;
the other column/path, to not get tested.
•Under the 'Tested' column, text reads, 'KNOWING
YOU HAVE HEPATITIS C can help you make
important decisions about your health. Many people can
get LIFESAVING CARE AND TREATMENT.
Successful treatments can ELIMINATE THE VIRUS
from the body.'
•Under the 'Not Tested' column, the text reads, '60% of
people with HEPATITIS C will develop SERIOUS
LIVER PROBLEMS. Left untreated, HEPATITIS C can
cause LIVER DAMAGE & LIVER FAILURE.
HEPATITIS C is a leading cause of LIVER CANCER.
The footer has the logos for CDC-HHS and Know More
Hepatitis on the right-hand side and text on the left that
reads, 'Don’t go down the wrong path, talk to your doctor
about getting tested. It could save your life.
Break it down into parts
Illustrations & Cartoons
Summarize!
Mostly blue and green
Mostly orange and red
Context
Requires specific
description detail.
Cartoons
1.
2.
3.
4.
Setting
Characters
Details as needed
Caption
Data Visualization
4. Adding Image Description to
Digital Media
Adding Image Description
HTML & EPUB
• alt
• longdesc
• ARIA (W3C) contains several imagedescription properties
DTB
• alt
• prodnote
Adding Image Description
PDF
• figure tag (text only, no markup)
MS Word
• alternative text within image properties
InDesign
• alternative text
5. DIAGRAM Center
Tools & Resources
DIAGRAM’s POET
http://www.youtube.com/user/diagramc
DIAGRAM’s Content Model
Content Model:
Container for Additional Information
Multiple Alternative Elements
• short description
• long description
• SVG reference
• description of SVG, tactile
• simplified description
• alternative image
• alternative image
description
Content Model:
Container for Additional Information
•
•
•
•
•
Metadata
purpose, age/grade level
links to specific image
description repositories
quality rating
concept (of the image)
version of content model
6. Alternatives: Recorded, Read
Live, Tactile, Haptic, and
Smart Images
Recorded Narration or Read Live
Parts of a Complex Description:
1. Title
2. Construction of the Image
3. Summary or Overview
4. Data
Title
The figure is entitled "FOREIGN TRADE OF COUNTRY X, 1968 through 1980, in
United States dollars".
Construction
There are two lines on the graph, a dashed line labeled "Exports" and a solid line
labeled "Imports".
The vertical axis is labeled "Billions of Dollars," beginning with zero to eighteen, in
increments of 2. Note: one billion equals a one followed by 9 zeros.
The horizontal axis is labeled "Year" and lists all the years from 1968 through 1980.
Summary
In the graph, the Exports line begins in 1968 at 3 billion dollars, rises steeply to 14
billion in 1974, then drops to 9.5 billion in 1975 and 1976. In 1977, the Exports line
shoots up to 15.5 billion, then trails off to 10 billion in 1980.
In the graph, the Imports line begins in 1968 at 2 billion and rises steadily to 8.75
billion in 1980, except for minor dips in 1972 and 1979.
Data
The year is followed by imports in billions of dollars and then exports in billions of dollars.
•1968, 3, 2
•1969, 3, 2.3
Read Just Like the Table
•1970, 4, 2.4
•1971, 5, 3.1
•…continued
Tactile
Enhanced Tactile
Manipulatives
3D Printers
Haptic
Smart Images
Vibration!
Contact Information
Bryan Gould
WGBH National Center for Accessible Media
bryan_gould@wgbh.org
DIAGRAM Center
Funded by Department of Education, Office of Special
Education Programs (OSEP)
diagramcenter.org