Strategies for Representing
Graphics: from eText to Alt Tags to
Tactiles
Accessing Higher Ground, 2013
Robert Beach and Gaeir Dietrich
Presenters
Gaeir Dietrich
Director
High Tech Center
Training Unit
CCCs
gdietrich@htctu.net
408-996-6047
Robert Lee Beach
Assistive Technology
Specialist
Kansas City Kansas
Community College
rbeach@kckcc.edu
913-288-7671
Graphics. What to do?

Web pages, DE courses, online
documents
 Alt text

In books
 Possibly alt text
○ Generally preferred
 Possibly insert the caption
○ Preferred by some students so that the
caption does not interrupt reading
As Specific Accommodations
When working with a particular student,
ask his/her preferences.
 Some students do not want the
graphics.
 Some students will have a reader
describe graphics.
 Some students will want either the
embedded caption or alt text.

I have the graphic, now what?

First figure out the purpose of the
graphic.

What does the graphic convey?

How much is the purpose of the graphic
informational? How much decoration?
Describing Graphics

When determining the purpose, always
consider the context in which the
graphic is being shown.

The same graphic may have a different
purpose in a different context.
 Sometimes decoration
 Sometimes informational
How Do I Decide??

Does the student need to do something
with the graphic or understand
something from it?
 Informational

Is the graphic simply entertaining or
“pretty”?
 Decoration
Informational

If information is being conveyed, then
consider…
 What is the information being presented in
the graphic?
 Is that information already conveyed in the
text?
 How can I describe the graphic in as few
words as possible?
Decoration
Does it even need to be described?
 If not, null text it or “_” .
 If yes, how much? Usually very little.

What Do I Say?*

1. Be objective
 Stick to the facts, do not interpret

2. Be brief
 The shorter the better

3. Be descriptive
 Use words that convey clear meaning

4. Be logical
 Use a sequence or structure

5. Be accurate
 Make sure the information you give matches the
book/site

* From A Picture Is Worth 300 Words: Writing Visual Descriptions For An
Art Museum Web Site by Adam Alonzo
No Single Right Way

There is not only one way to describe
graphics.

Just remember…
 Keep context in mind
 Ask yourself: Is this something the person
really needs to hear?
Exercise Photo 1

In a book about exercise, this photo
appears at the beginning of a chapter on
nutrition:
Possible Alt Text

The photo is decorative.
 It is simply illustrating the theme of the book.

Keep the description simple:
 People biking
Exercise Photo 2

In the same textbook, the graphic below
is included next to boxed text about the
benefits of strength training.
Possible Alt Text

This graphic is purely decorative.
Since this graphic is essentially “eye
candy,” it is a good example of when a
null tag might be useful.
 If you do want to describe, keep it very
short: “Smiley face lifting weights.”

Logo Example 1
Kansas City Kansas Community College
Presents an Evening of Jazz
Come join us for two hours of wonderful jazz by
the lake. …
Possible Alt Text

The logo is decorative.
Logo is branding for school, but in this
context is essentially decorative from the
end-user’s viewpoint.
 Since the graphic is decorative, keep it
simple.

 College logo
 KCKCC logo
Logo Example 2

In marketing your business, the design of a
logo can make a big impression or can be a
waste of money. The logo needs to be
attractive but not dominate other information
presented along with the logo. In the
example below, what catches your attention?
Possible Alt Text

The logo is informational.
In this case, the same logo is a specific
example and requires a more lengthy
description.
 Focus on what the student needs to
know:

 Interlocking blue K and red C on left with the
words “Making Life Better” in red above the
college name in black blocked and
underlined with a blue line.
Blood Pressure Example 1

Proper positioning of the cuff, stethoscope
and arm are important to accurate blood
pressure readings. The arm should be
relaxed and straight, resting on a flat surface.
The cuff should be positioned just above the
elbow. The stethoscope should be positioned
over the brachial artery at the bend of the
elbow. See the example for proper
technique.
Possible Alt Text

The graphic is decorative.
The graphic is illustrative of what has
been described in the text, and no
further description is needed.
 Keep the alt text simple:

 Taking blood pressure, see description
above. (In other contexts, may say, “see
description on page xx.”)
Blood Pressure Example 2
Proper positioning of the cuff, stethoscope, and
arm are important to accurate blood pressure
readings. See the example below for a
demonstration of correct technique.
Possible Alt Text

The graphic is informational.
Since the photo illustrates a particular
procedure, it would require a longer
description because the description is
not already present in the text.
 (If you have the book, check the
surrounding pages for a longer
description.)

Math Example 1

The graph of a Gaussian function is a
characteristic symmetric “bell curve”
shape that quickly falls off towards
plus/minus infinity.
Possible Alt Text

The graphic is informational.
The graph illustrates what a bell curve
is.
 Alt text could be “A bell curve.”
 However…what if the student does not
know what a bell curve is?!?

When More Is Needed
Sometimes even a long description will
not really convey the information in the
graphic.
 The alt text will not be sufficient for a
student’s needs.


Tactile graphics to the rescue!
What Are Tactile Graphics?

A tactile graphic is a tactile
representation of the content conveyed
by a graphic.

Tactile graphics are not simply “copies”
but are new conceptualizations of the
information being conveyed.
 They convey the same information in a
totally different form.
Tactiles Needed

STEM subjects
 Tactile graphics are often needed to convey






complex concepts
Charts and graphs
Molecular structures
Circuits and vectors
Diagrams of systems
Flowcharts
Maps
Finding Tactiles

Ready-made graphics are sometimes
available
 American Printing House: www.aph.org
 National Braille Press: www.nbp.org
 Princeton Braillists (maps) :
https://nfb.org/images/nfb/publications/braille
/tactilemaps.htm

Predescribed graphics
 Diagram Center: http://diagramcenter.org/
Talking Graphics

Touch Graphics
 Talking Tactile Tablet
 http://www.touchgraphics.com/

View Plus
 Tiger Embosser
 IVEO talking tablet
 http://www.viewplus.com/
Hiring Work Done

Alternate Text Production Center (ATPC)
 www.atpc.net

Princeton Braillists
 http://mysite.verizon.net/resvqbxe/
princetonbraillists/

South Dakota Pheasantland Industries
 http://doc.sd.gov/adult/industry/shop/
braille.aspx
Who Ya Gonna Call?

Tactile Graphics Expert
 Lucia Hasty
 http://www.rockymountainbraille.com/

Contact us for other recommendations
Making Tactile Graphics

Collage
 Puff paint, magnets, cork boards and string,
Wiki Stix
Sewell raised line drawing kit
 PIAF (Pictures in a Flash)

 www.HumanWare.com

Braille embossers
 Tiger embosser
 Phoenix embosser
What to Consider

How are we going to convey the
information represented in the graphic?

BANA Guidelines
 BANA (www.brailleauthority.org) has a great
decision tree for determining what you need
for a tactile graphic
Reality Check
Not all students are familiar with tactile
graphics.
 To help students learn…

 Start with a 3D model
 Present the same concept with collage
 Now create a PIAF representation of the
concept
Tactile Graphics Resources

BANA Tactile Graphics Guidelines
 http://www.brailleauthority.org/tg/index.html

Tactile Graphics Web site
 www.tactilegraphics.org
Resources & Credits

A Picture is Worth 300 Words
 http://www.csun.edu/cod/conf/2001/proceedi
ngs/0031alonzo.htm
 DIAGRAM: http://diagramcenter.org
 NCAM:

http://ncam.wgbh.org
Blood Pressure photo
 Photo Credit blood pressure check image by
.shock from Fotolia.com
Thank you!

Robert Beach
 rbeach@kckcc.edu

Gaeir Dietrich
 gdietrich@htctu.net