1. Introducing the Accessible Image Sample Book Suzy Haines, Lucia Hasty, Steve Noble, Elaine Ober February 6, 2014

2. Page 2 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

3. Page 3 When Alt Text Alone Won’t Do

4. Page 4 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

5. Page 5 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

6. Page 6 The DIAGRAM Center Community

7. Page 7 Who is on the line today… Presenters: Suzy Haines, Benetech Email: suzyh@benetech.orgsuzyh@benetech.org Lucia Hasty, Rocky Mountain Braille Associates Email: lucia@tactilegraphics.orglucia@tactilegraphics.org Julie Noblitt, DIAGRAM Center Email: julien@benetech.orgjulien@benetech.org Steve Noble, Univ. of Louisville, Bridge Multimedia Email: steve.noble@louisville.edusteve.noble@louisville.edu Elaine Ober, Pearson Email: elaine.ober@pearson.comelaine.ober@pearson.com Q & A: Geoff Freed, National Center for Accessible Media, WGBH Email: geoff_freed@wgbh.orggeoff_freed@wgbh.org Bryan Gould, National Center for Accessible Media, WGBH Email: bryan_gould@wgbh.orgbryan_gould@wgbh.org Madeleine Rothberg, National Center for Accessible Media, WGBH Email: madeleine_rothberg@wgbh.orgmadeleine_rothberg@wgbh.org

8. Page 8 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

9. Page 9 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

10. Page 10 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.

11. Page 11 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?

12. Page 12 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.

13. Page 13 Sample Image 3: Bar Chart ● This image can be made accessible in two ways: –Text description –Tactile graphic

14. Page 14 Sample Image 3: Bar Chart ● Short description option 1 Figure 9.2, based on a national sample, displays three bar graphs that illustrate institutional discrimination and predatory lending for house loans. ● Short description option 2 A 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.

15. Page 15 Sample Image 3: Bar Chart ● Long description option 1: List Group 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

16. Page 16 Sample Image 3: Bar Chart ● 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) Whites15%11%14% Latinos25%26%36% African Americans30% 43% These column headings repeat the text labels from the bottom of the graph These headings correspond to the 3 bars

17. Page 17 ● 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 Sample Image 3: Bar Chart

18. Page 18 Sample Image 3: Bar Chart ● And a tactile version of the graph, which provides the information. ● This example was output from a high resolution graphics embosser.

19. Page 19 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

20. Page 20 Sample 4: Quadratic Functions and Their Graphs ● 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

21. Page 21 Sample 4: Quadratic Functions and Their Graphs ● 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)."

22. Page 22 Sample 4: Quadratic Functions and Their Graphs ● 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 filesMathTrax

23. Page 23 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

24. Page 24 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

25. Page 25 Sample Image 6: Carbon Atom

26. Page 26 Sample Image 6: Carbon Atom

27. Page 27 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.

28. Page 28 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 drivehttp://diagramcenter.org/standards-and- practices/accessible-image-sample-book.html ● 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/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

29. Page 29 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: info@diagramcenter.orginfo@diagramcenter.org

30. Page 30 Q & A Presenters: Suzy Haines, Benetech Email: suzyh@benetech.orgsuzyh@benetech.org Lucia Hasty, Rocky Mountain Braille Associates Email: lucia@tactilegraphics.orglucia@tactilegraphics.org Julie Noblitt, DIAGRAM Center Email: julien@benetech.orgjulien@benetech.org Steve Noble, Univ. of Louisville, Bridge Multimedia Email: steve.noble@louisville.edusteve.noble@louisville.edu Elaine Ober, Pearson Email: elaine.ober@pearson.comelaine.ober@pearson.com Q & A: Geoff Freed, National Center for Accessible Media, WGBH Email: geoff_freed@wgbh.orggeoff_freed@wgbh.org Bryan Gould, National Center for Accessible Media, WGBH Email: bryan_gould@wgbh.orgbryan_gould@wgbh.org Madeleine Rothberg, National Center for Accessible Media, WGBH Email: madeleine_rothberg@wgbh.orgmadeleine_rothberg@wgbh.org

31. Page 31 For More Information ● Accessible Image Sample Book includes links to great resources –Image description guidelines –Tutorials

32. Page 32 For More Information DIAGRAM Center web site and blog http://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/

33. Page 33 Even more resources Visit our Training Resources page at http://diagramcenter.org/standards- and-practices/training.htmlhttp://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&eomhttps://cc.readytalk.com/r/mphepsbx86xy&eom