Office Hours: Image Description

1. Office Hours: Image Description Presented by the DIAGRAM Center and the WGBH National Center for Accessible Media (NCAM) October 24, 2013

2. What to expect today • Answers to questions regarding image descriptions • questions and images collected beforehand • examples of difficult-to-describe images and charts • approaches that can be adapted • multiple ways to describe • Q+A

3. Question 1: schematic drawings • Schematic drawings are often an issue to describe. What are the best practices for these? • similar to flow charts • flow chart with complex paths • process diagram as a flow chart • provide a summary and then a list • simple flow charts can be summarized without a list

4. Question 1: schematic drawings A schematic diagram of a simple circuit with a switch. • Three batteries form a power pack. Each battery is represented by a pair of long (positive) and short (negative) lines. • A wire, represented by a straight line, leaves the positive terminal of the power pack and connects to a toggle switch, which is in the open position. The open switch is represented as a break in the wire, lifted at a diagonal. • The wire continues to a light, which is represented by a zigzag line with a circle around it, and then back to the negative terminal of the power pack.

5. Question 1: schematic drawings A schematic diagram of a simple circuit with a switch. The circuit is composed of three batteries, a toggle switch and a light. The switch is in the open position.

6. Question 2: complex image Many diagrams from biology texts are three-dimensional and contain multiple steps. Do you have advice about how to create audio descriptions or tactile versions of these?

7. Question 2: complex image

8. Question 2: complex image • Summarize the illustration briefly, then provide details • If color is used to convey information, include that in the description • otherwise, do not include information about color or design • If appropriate, include information about shape and relative size • If the image includes data in the form of a chart or graph, present that data in a data table • ensure that proper markup is used (e.g., <th> on header cells; @scope if necessary) • Include the text of the photo caption if the text is contained within the image (as opposed to being provided as true text)

9. Question 2: complex image Question 2: complex image

10. Question 2: complex image The ribbon model resembles a tangle of string, connected in a few places with yellow lines. One section is indented and labeled “groove.” The space-filling model is a grape-like cluster of grey spheres. Some of the spheres are half red or half blue. One section is indented and labeled “groove.”

11. Question 3: complex image How would you describe the following image?

12. Question 3: complex image Summarize the illustration briefly If color or design are used to provide information, include this in the description; otherwise do not include these elements in the description Provide a description based on the intent of the image as well as the intended audience

13. Question 3: complex image • Complex illustrations can usually be broken down into data tables or lists • this illustration can be viewed as a flow chart • follow the logical flow of the illustration • use nested lists as a way to help organize information or data progression

14. Question 3: complex image An illustration shows tissues, cells and blood plasma separated by interstitial fluid. Arrows of various thicknesses show CO2 moving from the tissue cells into the interstitial fluid and then into the blood plasma. The reactions are listed. • A medium arrow shows CO2 moving from the interstitial fluid into the plasma, then it is dissolved in plasma. • Narrow arrow shows CO2 moving from the interstitial fluid into the plasma with the reaction, CO2 + H2O slow yields H2CO3 yields HCO3 negative + H positive which binds to plasma proteins. • …and so on.

15. Question 4: complex flow chart What approach would you take with the following image?

16. Question 4: complex flow chart • Look at the context. Does the surrounding text cover this material with the visual as a backup? If so refer to the text. • Use common abbreviations if they make sense; check text for usage. • This image is essentially a complex flow chart with multiple interactions at each step. • Begin with a brief overview that explains any distinctive visual elements (major sections and branching points, for example) • Provide a list that follows the numbered progression shown in the image • use nested lists as a way to help organize information or data progression • Do not describe visual attributes (e.g., colors, shapes) unless there is an explicit need to do so.

17. Question 4: complex flow chart A diagram shows steps in a process. The diagram has four main sections: Wireless Client; Wireless Access Point (WAP); Network Authentication and Authorization Service (NAAS); and Network Resources. Each main section is divided into subsections. • Step 1: Certificate Enrollment: connects the Wireless Client’s Certificate Client to the NAAS’s Certificate Authority, which is linked by a Certificate to a User in the Directory. • Step 2: Client Authentication: the Wireless Client’s Certificate Client passes a Certificate through a TLS tunnel past the WAP’s Authentication and Key Management and into the NAAS’s RADIUS (Network Authentication and Access Control). The RADIUS also gets input from the User in the Directory. • Step 3: Authorization: with input from the NAAS’s Access Policy, the RADIUS provides authorization to the WAP’s Authentication and Key Management. • Step 4: Key agreement: from Authentication and Key Management in the WAP to three places: • Within the WAP, to the Crypto Module within the WLAN Bridge. • To the WLAN Client section of the Wireless Client, and onto the Crypto Module of the Wireless Client. • To the RADIUS within the NAAS. • …and so on

18. Question 5: timeline How would you describe this graph?

19. Question 5: timeline • These are two timelines, which are essentially line graphs • Begin with a brief overview that conveys the timespan and topic • provide title and axis information • Convert the data in each timeline into a data table OR a list, as appropriate. • Do not describe visual attributes (e.g., colors, shapes) unless there is an explicit need to do so

20. Question 5: timeline Figure 19.2, World Population Growth: 10,000 B.P. – 2000 A.D. Two graphs. In the first graph, the horizontal axis measures years before present and the vertical axis measures estimated population in billions. From 10,000 years ago the population is very small and gradually rises to half a billion, until just before present when it suddenly shoots up to five billion. The second graph shows details of the last 500 years. Events are marked on both graphs. For the first graph, the events are listed below as a timeline. 10,000 years before present, population just above zero. Ice age ends. 8,000 years before present. Early humans in Patagonia. Pyramids, approximately 4,500 years before present. Confucius, approximately 2,500 years before present. Christ, 2,000 years before present. Fall of Rome. Mohammed. Crusades. …and so on

21. Question 6: guidelines • Where can I find a basic list for teachers to reference how to create accessible images? • for sciences, social science, arts, math • Are there guidelines or recommendations on how to write the descriptions for graphics? • Are there stock or standard descriptions for mathematical items such as coordinate planes, line plots, stem-and-leaf, etc.? • How to describe items such as political cartoons, photographs, paintings, etc.?

22. Question 6: guidelines • Effective Practices for Description of Science Content within Digital Talking Books • HTML5: Techniques for Providing Useful Text Alternatives • WebAIM’s Creating Accessible Images • DIAGRAM Center • Webinars archive • sessions about image descriptions as well as accessible math • POET • tool for describing images in DAISY books (EPUB 3 support coming soon) • American Printing House for the Blind (APH) • APH Tactile Graphic Image Library

23. Question 6: guidelines • Math and MathML • MathML 3.0 • MathSpeak Initiative at gh • What are the Technology Issues Involved in Making Math Accessible? • DIAGRAM Webinar: Tools for Creating Accessible Math • Guidelines for Accessible Assessments Project (GAAP) (draft) • methods for describing math and ELA in assessments • math guidelines include symbols, numbers, charts/graphs, expressions, plots, etc. • ELA guidelines include information about maps, cartoons, timelines, etc.

24. Question 6: artwork

25. Contact information DIAGRAM Center Julie Noblitt julien@benetech.org http://diagramcenter.org DIAGRAM is funded by the U.S. Department of Education, Office of Special Education Programs (OSEP) NCAM Geoff Freed, Bryan Gould National Center for Accessible at the WGBH Educational Foundation geoff_freed@wgbh.org; bryan_gould@wgbh.org http://ncam.wgbh.org