introducing the accessible image sample book suzy haines, lucia hasty, steve noble, elaine ober...

Introducing the Accessible Image Sample BookSuzy Haines, Lucia Hasty, Steve Noble, Elaine Ober

February 6, 2014

The DIAGRAM Center

● A Benetech Global Literacy Initiative● Digital Image and Graphic Resources for

Accessible Materials ● Goal: Make it easier, faster, and cheaper to

create and use accessible images for students with print disabilities

● 5-year Research & Development Center funded by the U.S. Department of Education, Office of Special Education Programs (OSEP)

● Awarded to Benetech along with partners:– The Carl and Ruth Shapiro Family National Center for

Accessible Media (NCAM) at WGBH

– U.S. Fund for DAISY

When Alt Text Alone Won’t Do

The need

6.4 million Students aged 3-21, in U.S. schools, receive services under IDEA

2.2 million Students in 2- and 4-year U.S. post-secondary institutions

qualify for some sort of accommodation

The DIAGRAM Center Approach

• Accessible Image Sample Book

• Content Model• Top Tips for Publishers

Standards

• Poet• Image Coverage

Checker• Math Helper

Tools• Tactile graphics,

haptics, 3-D printing, sonification

• Webinars

Research & Training

The DIAGRAM Center Community

Who is on the line today…

Presenters:

Suzy Haines, Benetech

Email: [email protected]

Lucia Hasty, Rocky Mountain Braille Associates


Julie Noblitt, DIAGRAM Center


Steve Noble, Univ. of Louisville, Bridge Multimedia


Elaine Ober, Pearson


Q & A:

Geoff Freed, National Center for Accessible Media, WGBH


Bryan Gould, National Center for Accessible Media, WGBH


Madeleine Rothberg, National Center for Accessible Media, WGBH


mailto:[email protected]








New: Accessible Image Sample Book

● Free online resource with examples of accessible images, in full-page context

● Includes commentary on treatments and sample code

● DIAGRAM Content Working Group assembled the work

Using the Samples

● Example layouts● Code snippets● Source files

– in download bundle

– on DIAGRAM website

http://diagramcenter.org/standards-and-practices/accessible-image-sample-book.html




Sample Image 1: Heart and Lung Diagram

● Image description can incorporate the numbered steps in the diagram.

● Tactile graphic provides reader with info on physical relationship between lungs, heart, and blood flow.

Sample Image 2: Map of North America

● Things to consider– What is the student

expected to learn from this map?

– What is the grade level?

– What background information might the student already have?

Sample Image 2: Map of North America

● This image can be made accessible via text description.

● The short description sets the stage.

● The long description provides the data in a navigable, tabular format.

Sample Image 3: Bar Chart

● This image can be made accessible in two ways:– Text description

– Tactile graphic


● Short description option 1Figure 9.2, based on a national sample, displays three bar graphs that illustrate institutional discrimination and predatory lending for house loans.

● Short description option 2A bar graph shows that Latino and African American applicants both below and above median income levels are more likely to be denied mortgages or charged higher interest rates.


● Long description option 1: ListGroup 1: Applicants whose income was below the median income and were denied mortgages:

15% of Whites

25% of Latinos

30% of African Americans

Group 2: Applicants whose income was above the median income and were denied mortgages:

11% of Whites

26% of Latinos

30% of African Americans

And a corresponding list for Group 3


● Long description option 2: Table

Applicants denied a mortgage: income below median

Applicants denied a mortgage: income above median

Applicants charged higher interest/given subprime loans (income at 100% to 120% of median)

Whites 15% 11% 14%

Latinos 25% 26% 36%

African Americans 30% 30% 43%

These column headings repeat the text labels

from the bottom of the graph

These headings

correspond to the 3

bars

● This image can also be made accessible with a tactile graphic

● This includes a key page, in braille, which will guide the reader through the image



● And a tactile version of the graph, which provides the information.

● This example was output from a high resolution graphics embosser.

Sample 4: Quadratic Functions and Their Graphs

● Books dealing with mathematics can be expected to have both math notation and graphs of equations and data sets

● Math notation should be encoded in MathML

● Graphs of equations and data sets can be made accessible by using image descriptions and sonification


● Math notation should be encoded in MathML, not inserted as images alone

● MathML encoding will provide both superior display quality and accessibility

● MathML can provide synthetic speech technology with information that can be used to create a variety of speech styles


● One method of making these graphs accessible is to use image descriptions

● A brief description of the first graph could be: "A vertical parabola with the vertex at (1, -1)."

● The second graph could be described as: "A vertical parabola with the vertex at (0, -1). The parabola crosses the following points: (1, 0); (-1, 0); (2, 3); (-2, 3)."


● Another method of making these graphs accessible in a digital book is to use sonification

● A sonification example first graph is provided here

● The second graph sonifaction sounds like this

● The MathTrax application is a convenient way to create graph sonification files

http://prime.jsc.nasa.gov/mathtrax/homepage.htm

Images- Formal Assessment

● US Copyright Law requires:– explicit permission of

publisher to reproduce content

– careful attention to maintaining scope of what is being tested

Sample 5: Angles on a Survey Map

Sample 5: Angles on a Survey Map

Text or Audio Description

Two surveyors, A and P, stand some distance

apart on the south bank of a river, looking at a

tree, T, that is on the north bank of the river.

Points A, P, and T form a triangle. At points A

and P, there are two parallel sight lines

pointing north and forming angles outside

of the triangle. At point P, angle TPA is 53

degrees. The adjacent angle between PT and

the northern sight line is 37 degrees. At point

A, angle TAP is not labeled, and the adjacent

angle formed between AT and that northern

sight line is 32 degrees.

Tactile Graphic

Sample Image 6: Carbon Atom

Sample 7: Decorative and Redundant Images

Some images don't need to be made accessible if • their function in the text

is purely decorative • they convey information

that is also provided in the text.

How to Access the Book

● Visit http://diagramcenter.org/standards-and-practices/accessible-image-sample-book.html and save the EPUB or HTML zip file to your hard drive

● Open a web browser (Firefox or Chrome recommended)– If using the EPUB, install a free epub reader extension

• For example, in Firefox https://addons.mozilla.org/en-us/firefox/addon/epubreader/

Then open your browser and drag the Sample Book file into the open browser window

– Or unzip the HTML bundle and open in your web browser




https://addons.mozilla.org/en-us/firefox/addon/epubreader/

Looking Ahead

● We expect to update the Accessible Image Sample Book as new technologies emerge:– Smart images

– Haptics

● In the meantime, please send us your comments and suggestions!

● Write to us at: [email protected]


Q & A

Presenters:

Suzy Haines, Benetech


Lucia Hasty, Rocky Mountain Braille Associates


Julie Noblitt, DIAGRAM Center


Steve Noble, Univ. of Louisville, Bridge Multimedia


Elaine Ober, Pearson


Q & A:

Geoff Freed, National Center for Accessible Media, WGBH


Bryan Gould, National Center for Accessible Media, WGBH


Madeleine Rothberg, National Center for Accessible Media, WGBH










For More Information

● Accessible Image Sample Book includes links to great resources– Image description

guidelines

– Tutorials

For More Information

DIAGRAM Center web site and bloghttp://diagramcenter.org

Twitter @DIAGRAMC https://twitter.com/DIAGRAMC

Born Accessible

http://benetech.org/our-programs/literacy/born-accessible/

Accessibility Metadata Project

http://www.a11ymetadata.org/

Benetech Global Literacy

http://benetech.org/our-programs/literacy/

http://diagramcenter.org/

https://twitter.com/DIAGRAMC



http://www.a11ymetadata.org/

http://benetech.org/our-programs/literacy/

Even more resources

Visit our Training Resources page at http://diagramcenter.org/standards-and-practices/training.html

●Office Hours with the Image Description Experts

●Tools for Creating Accessible Math

●Best Practices for Integrating Accessible Images into eBooks and DTBs

●Accessible Images: From Creation to End User

●How to Describe Complex Images for Accessibility

●Digital Accessible Math Images

● NEXT WEBINAR on April 30, 2014, “3D Printing of Accessible Educational Materials”Register: https://cc.readytalk.com/r/mphepsbx86xy&eom

http://diagramcenter.org/standards-and-practices/training.html

https://cc.readytalk.com/r/mphepsbx86xy&eom

https://cc.readytalk.com/r/mphepsbx86xy&eom

introducing the accessible image sample book suzy haines, lucia hasty, steve noble, elaine ober...

Documents