DIGITAL ACCESSIBLE MATH IMAGES

1
DIGITAL ACCESSIBLE MATH IMAGES

• Presented by the DIAGRAM Center
• Bryan Gould
• WGBH National Center for Accessible Media

2

1. Introduction
2. Overview of Digital Alternatives to Images
3. STEM Description Guidelines
4. MathML
5. DIAGRAM Tools Resources

3
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

4
(some of) 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

5
NCAM (est. 1993)

• Research and Development
• develops technical solutions
• conducts research
• promotes advocacy via outreach
• supports national policy decisions

6
Accessible Digital Math
7
Overview of Digital Alternatives to Images
8
Example of Math Read by TTS
9
What about Recorded Descriptions?

• Images are often described on-the-fly or recorded
  by a narrator.
• Many math images are best described by linear,
  narrative description or traditional
  description.
• Many of the following guidelines will apply!

10
Two graphs. For both, the y-axis is labelled
"area" and the x axis is labelled "side of
square. The first graph shows 5 points
plotted (0,0) (1,1) (2,4) (3,9) (4,16). The
second graph shows the same points and a line
connecting the points. The line begins at (0,0)
and curves steeply upward through (4,16).
11
Other alternatives Tactile Haptic
12
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.

13
How to Write Descriptions

• The description author should consider three
  basic questions about each image in order to give
  effective and efficient description.
• Why is the image there?
• Who is the intended audience?
• If there is no description what will the viewer
  miss?

14
Assessments
Research Professional Development http//
ncam.wgbh.org/experience_learn/educational_media/d
escribing-images-for-enhanced

15
Easy Medium Difficult

• Easy images include anything that can easily be
  described within a minute by a trained describer.
  
• Medium images take more effort and usually
  require more description than a sentence or two.
• Difficult images require the describer to stop to
  consider how to best describe this image and
  often require the describer to create a data
  table or nested list.

16
Easy
17
Medium
18
Context
A chemist has two containers, Mixture A and
Mixture B. Mixture A has a 60 copper sulfate
concentration. Mixture B has a 5 copper sulfate
concentration. The chemist needs to have a
mixture equaling 500 mL with a 15 concentration.
How much of each mixture does the chemist need?
19
Context
This is an image of the state flag of Colorado
20
This is an image of the state flag of Colorado
It turns out that the diameter of the gold circle
1/3 the total height of the flag (the same width
as the white stripe) and the outer diameter of
the red circle is 2/3 of the total height of the
flag. The angle formed by the missing portion of
the red circle is pi/4 radians. In a flag that is
66 inches tall, what is the area of the red
portion of the flag to the nearest square inch?
21
(No Transcript)
22
STEM Description Guidelines
23
STEM Description Guidelines

• Four years of NSF-funded research produced
  guidelines for making STEM images accessible.
• STEM Science, Technology, Engineering and Math

24
Brevity

• The most frequent recommendation from
  respondents was for more brevity in description.
• It takes people with visual impairments more
  time to read books and articles than people
  without visual impairments and the process should
  not be further slowed down by unnecessarily long
  image descriptions.

25
Brevity

• PREVIOUS Descriptive Practice
• The figure is a Venn diagram and shows 2
  intersecting circles inside a large rectangle.
  The circles do not touch the rectangle. The
  circle on the left contains the numbers 1 and 2.
  The circle on the right contains the numbers 4
  and 5. The intersection of the 2 circles is
  shaded and has the number 3 in the shaded region.
  Outside of the circles but still inside the
  rectangle is the number 6.
• PREFERRED Descriptive Practice
• The Venn diagram shows 2 intersecting circles,
  one contains the numbers 1 and 2, the other
  circle contains the numbers 4 and 5. The area of
  intersection contains the number 3. The number 6
  is outside the circles.

26
Data

• Description should focus on the data and not
  extraneous visual elements.
• Elaborately illustrated diagrams often contain
  key data that can be made accessible by
  presenting the data separate from description of
  the overall image.

27
(No Transcript)
28
PREVIOUS Description emphasizes visual
Carbon Cycle In a diagram titled "Carbon Cycle,"
numbers and arrows illustrate the movement of
carbon through Earth's atmosphere, land, ocean,
and interior. Black numbers indicate amounts of
stored carbon. Purple numbers and arrows indicate
annual fluctuations of carbon. Amounts are
measured in GtC - giga tons of carbon. Colorful
pictures depict a sunny landscape with elements
of the carbon cycle. Four long arrows encircle
the landscape, representing the cycling of
carbon. Carbon is stored in many places 750 GtC
in the atmosphere 610 GtC in vegetation 4,000
GtC in fossil fuels and cement production 1,580
GtC in soils 3 GtC underwater in marine biota
less than 700 GtC in dissolved organic carbon
underwater 150 GtC in soil sediments beneath the
water 38,100 GtC in the deep ocean and 1,020 in
the surface ocean. On land, many factors cause
annual fluctuations of carbon in the atmosphere.
An arrow points away from a factory's smoky
chimneys, illustrating how fossil fuels and
cement production release 5.5 GtC into the
atmosphere. On the other side of a river, an
arrow points to a grove of pine trees,
illustrating the trees absorption of 0.5 GtC from
the atmosphere. Across the hilly landscape, cows
graze near a tractor plowing a field. Nearby,
arrows point to and from another grove of trees
one arrow rises from the trees and another points
to it, illustrating an exchange of carbon 121.3
GtC is absorbed by the trees and 60 GtC is
released into the atmosphere. A fire burns beside
several fallen trees, depicting deforestation. An
arrow rises from the fire, showing how
deforestation releases 1.6 GtC into the
atmosphere. Another arrow points away from a
layer of brown soil beneath the trees,
illustrating how soils release 1,580 GtC into the
atmosphere. In the ocean, depicted as a deep
blue pool, many factors cause annual fluctuations
of carbon. One arrow rises from the surface ocean
and another points to it, illustrating an
exchange of carbon the atmosphere absorbs 90 GtC
from the surface ocean and releases back 92 GtC.
Another pair of arrows shows how the surface
ocean exchanges carbon with marine biota marine
biota absorb 50 GtC from the surface ocean and
release back 40 GtC. In addition, the surface
ocean exchanges carbon with the deep ocean the
deep ocean absorbs 91.6 GtC and releases back 100
GtC. Other annual fluctuations occur without
exchanges an arrow points from marine biota to
dissolved organic carbon in the ocean,
illustrating a release of 6 GtC. The direction of
another arrow shows how dissolved organic carbon
releases 6 GtC to the deep ocean. An arrow points
from the deep ocean to the layer of brown
sediments beneath it, illustrating how the deep
ocean releases 0.2 GtC to the sediments.
29
PREFERRED Description emphasizes data
The diagram is titled "Carbon Cycle." Colorful
pictures depict farms, forests, rivers, oceans
and industry. Four arrows encircle the diagram,
representing the cycling of carbon. Smaller
arrows illustrate Storage of Carbon and Fluxes in
Carbon through Earth's atmosphere, oceans and
land. Amounts are measured in G t C - gigatons of
carbon. Carbon Storage and Annual Fluxes in
Carbon are depicted in the following tables.
Flux G t C
Atmosphere to Vegetation 121.3
Vegetation to Atmosphere 60
Soils to Atmosphere 60
Forest Fires to Atmosphere 1.6
Atmosphere to Evergreen Forest .5
Fossil Fuels and Cement Production to Atmosphere 5.5
Surface Ocean to Atmosphere 90
Atmosphere to Surface Ocean 92
Surface Ocean to Marine Biota 50
Marine Biota to Surface Ocean 40
Storage Area GtC
Atmosphere 750
Vegetation 610
Fossil Fuels and Cement Production 4,000
Soils 1,580
Surface Ocean 1,020
Deep Ocean 38,100
Marine Biota 3
Underwater Dissolved Organic Carbon less than 700
Ocean Sediments 150
30
Clarity
31
Clarity

• If the reader needs to listen to a description
  several times because it is poorly written or is
  presented in a confusing manner, then it is not
  accessible.

32
Drill-Down and Logical Organization

• Drill-Down brief summary followed by extended
  description and/or specific data.
• Drill-Down organization allows the reader to
  either continue reading for more information or
  stop when they have read all they want.

33
Drill-Down

• The figure is a pie chart.
• Title Municipal Solid Waste by Weight
• Paper and cardboard 40
• Other waste19
• Yard waste 18
• Plastics 8
• Glass 7
• Metals containing iron 7
• Aluminum 1

34
Logical

• A diagram shows the sun above a flagpole.
• The flag pole is 25 ft tall. The flag pole and
  the ground form a right angle.
• From the sun, a ray of light crosses the top of
  the flagpole and touches the ground 42 ft to the
  right of the flag pole. This forms the hypotenuse
  of a right triangle.
• The angle between the top of the flag pole and
  the suns ray is labeled X.

35
Logical

• Image The Colorado state flag
• The flag is made up of three horizontal bands of
  equal height. The top and bottom bands are blue,
  the middle band is white.
• In the center of the flag are two concentric
  circles. The center circle is yellow. The outer
  circle is red. The outer red circle is missing a
  portion on the right side, so that it forms a
  letter C.

36
Tables and Lists

• Tables, charts and graphs should be presented as
  tables, not as narrative description.
• Proper coding (captions, table headers, and table
  data) provide better access to tables than
  narrative description.
• Brief summaries or overviews of the charts should
  be presented before the tables.
• Processes that are presented visually can be
  converted into nested lists with good results.

37
Tables and Lists
38
Tables
Time Temperature Water
0 minutes to 10 minutes Temperature increases from -20C to 0C Water is solid
10 min to 20 min Temperature holds at 0C Water is melting
20 min to 30 min Temperature increases from 0C to 100C Water is liquid
30 min to 40 min Temperature holds at 100C Water is boiling
40 min to 50 min Temperature increases from 100C to 120 Water is gas
39
Lists

• A ling graph titled Evaporation of Water shows
  changes in water as temperature increases over
  time.
• 0 minutes to 10 minutes. Temperature increases
  from -20C to 0C. Water is solid.
• 10 min to 20 min. Temperature holds at 0C. Water
  is melting.
• 20 min to 30 min. Temperature increases from 0C
  to 100C. Water is liquid.
• 30 min to 40 min. Temperature holds at 100C.
  Water is boiling.
• 40 min to 50 min. Temperature increases from 100C
  to 120. Water is gas.

40
Tables
Red Blood Cells Amoeba Cells
Protein 49 Protein 54
Lipid 43 Lipid 42
Carbohydrate 8 Carbohydrate 4
41
MathML
42
MathML

• Math equations should be marked up with MathML
  and rendered in a way that is preferable to the
  individual reader.

43
DOED OSEP Recommendation

• June 22, 2012
• NIMAS recommends ...MathML be used to improve the
  accessibility of mathematical and scientific
  content in core instructional materials ...as the
  most effective method of providing accessible
  print instructional materials involving
  mathematical and scientific content to students
  who are blind or who have print disabilities.

44
MathML
z equals 2 a plus b squared over c
45
MathML
z equals 2 a plus b squared over c
46
MathML

• ltmath display'block'gt
• ltsemanticsgt
• ltmrowgt
• ltmigtzlt/migtltmogtlt/mogtltmngt2lt/mngtltmsupgt
• ltmrowgt
• ltmfracgt
• ltmrowgt
• ltmrowgtltmogt(lt/mogt
• ltmrowgt
• ltmigtalt/migtltmogtlt/mogtltmi
  gtblt/migt
• lt/mrowgt
• ltmogt)lt/mogtlt/mrowgt
• lt/mrowgt
• ltmigtclt/migt
• lt/mfracgt
• lt/mrowgt

47
MathML

• Spoken Math
• (plain English)

Refreshable braille print braille
Spoken Math (unambiguous)
48
MathML

• z equals 2 a plus b squared over c

z equals 2 times the fraction open parenthesis a
plus b close parenthesis superscript 2 over c
49
MathML
Math Editor
DTB Reader
DTB
Spoken Math (plain English)
Refreshable braille print braille
Spoken Math (unambiguous)
50
DIAGRAM Center Tools Resources
51
DIAGRAM Product Matrices

• Image-description and MathML support in
• DTB Authoring Software
• DTB Hardware
• DTB Software
• e-book Hardware
• e-book Software
• Image Authoring Software
• http//diagramcenter.org/research.html

52
DIAGRAM Product Matrices

• http//diagramcenter.org/research.html

53
DIAGRAM Product Matrices

• DTB Software that reads MathML
• AnyDaisy FF Extension
• JAWS for Windows
• ReadHear Mac and PC
• Window-Eyes
• http//diagramcenter.org/research.html

54
DIAGRAMs POET
http//www.youtube.com/user/diagramc
55
Math Helper
56
MathTrax
57
Math Resources

• STEM Description Guidelines Resources
• http//ncam.wgbh.org/experience_learn/educational_
  media/stemdx/effpracticesresources
• DIAGRAM Center
• http//diagramcenter.org
• Twitter DIAGRAMC
• POET
• http//diagramcenter.org/development/poet.html
• DAISY CONSORTIUM
• http//www.daisy.org/

58
Math Resources

• MeTRC
• Mathematics eText Research Center
• http//metrc.uoregon.edu/
• Smarter Balanced Mathematics Audio Guidelines
  (7/31)
• http//www.smarterbalanced.org/smarter-balanced-as
  sessments/
• Larrys SpeakEasy
• Classic Handbook for Spoken Math

59
Math Resources

• Design Science
• Math Type and Math Player
• http//www.dessci.com/en/
• gh
• Braille, Tactile Graphics, DTBs, NIMAS
• http//gh-accessibility.com/
• Infty Reader
• OCR that outputs to MathML
• www.inftyreader.org

60
Contact Information

• Bryan Gould
• WGBH National Center for Accessible Media
• bryan_gould_at_wgbh.org
• DIAGRAM Center Funded by Department of
  Education, Office of Special Education Programs
  (OSEP)