2. Creating Accessible Educational Web Media Accessing Higher Ground November 2012 – Suzanne Taylor, Director, Accessibility Solutions, Pearson – Kathleen Wahlbin, Senior Accessibility Specialist, Pearson

3. Contents 1. Pearson Guidelines – Guidelines that require functionality – Guidelines that impact the visual design – Guidelines that focus on coding standards

4. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor4 The Pearson Guidelines 1

5. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor5 Pearson Guidelines For Digital Learning Products & Services Section 508 (current & refresh) WCAG 2.0 Level AA Customized for Education Important information for our products bubbled up to the surface http://wps.pearsoned.com/accessibility

6. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor6 Pearson Guidelines - Goals For Digital Learning Products & Services Time to work with the material Not missing anything Confident not missing anything Everyone can discuss the material & work together http://wps.pearsoned.com/accessibility

7. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor7 Pearson Guidelines - Resources

8. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor8 36. Transcripts Resources inside the Guidelines Site

9. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor9 Breakdown of Guidelines into Three Categories.

10. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor10 Guidelines that require functionality

11. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor11 Guideline 2: Time limits Allow users to adjust short-term (20 hours or less) time limits to at least ten times the default.

12. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor12 Guideline 3: Timed Tests If Pearson Guideline 2 would invalidate a timed activity: Allow instructors to adjust time limits for particular students OR, Allow students to adjust the time or just complete the activity after the time limit is reached. And, record the time spent with the results.

13. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor13 Guideline 24: Ability to Stop Motion Allow users to stop any content that moves for more than five seconds or that updates automatically. http://abc.go.com/watch/the- neighbors/SH55199654/VD55243605/larry-bird-and-the-iron-throne

14. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor14 What if you pause a show? http://abc.go.com/watch/the- neighbors/SH55199654/VD55243605/larry-bird-and-the-iron-throne

15. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor15 What if you pause a show? http://abc.go.com/watch/the- neighbors/SH55199654/VD55243605/larry-bird-and-the-iron-throne

16. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor16 Guideline 25: Still View of Moving Content Allow the user to read text, equations & diagrams while they are not moving, autoscrolling or being automatically changed/replaced. Mobile device – can only see a portion of screen at once Magnifier – can only see a portion of screen at once

17. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor17 Complete Narration Audio Description

18. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor18 Guideline 31: Complete Narration Avoiding need for Audio Description “Look what happens. Explain the reason for this in the space provided.” Image from Mehran Moghtadai and Wikipedia Commons

19. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor19 Guideline 31: Complete Narration Avoiding need for Audio Description “We can see that where the green tube enters either glass, the tube appears to be broken, starting over again from a point a little ways away. The same thing happens again as the green tube enters either liquid. Explain the reason for this in the space provided.” Image from Mehran Moghtadai and Wikipedia Commons

20. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor20 Guideline 31: Complete Narration Helpful to draw student attention Image from Mehran Moghtadai and Wikipedia Commons

21. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor21 Guideline 31: Complete Narration or Audio Description Explain Confusing Sounds Only need to describe visual elements necessary to understand But what if a Lion keep growling while the speaker speaks over it? Pretty confusing! Try to work the information in in a natural way, "Professor Smith of the Smith Zoo speaks to a small crowd at the zoo's lion exhibit."

22. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor22 Guideline 37: Captions When movies, animations, slideshows or games use synchronized visuals and sound to provide information, use captions to provide all important auditory information.

23. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor23 Guideline 37: Captions When movies, animations, slideshows or games use synchronized visuals and sound to provide information, use captions to provide all important auditory information.

24. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor24 36. Transcripts - Speakers When audio provides information, provide the same information in a text transcript [Angrily] [Amused] [Laughing] [With Surprise]

25. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor25 38. Mirroring Source Materials

26. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor26 36. Transcripts When audio provides information, provide the same information in a text transcript

27. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor27 36. Transcripts When audio provides information, provide the same information in a text transcript

28. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor28 38. Mirroring Source Materials Another key example is when a PDF or eBook is used by some students while others use a printed book.

29. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor29 Guideline 39: User Content When end users (e.g. students, instructors) can upload or create content, allow and facilitate alternatives for non- text content (e.g. alt-text for images, captions and audio descriptions for video, transcripts for audio) and, where significant text editing is possible, semantic markup (e.g. headings, data tables and lists).

30. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor30 Guidelines that Apply to the Default Appearance A few standards apply to the default appearance

31. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor31 Guideline 26: Contrast for Text Readability Using a contrast ratio tool, choose text color and text background color so that the contrast ratio between the colors is at least: 4.5:1 for small text 3:1 for text that is at least 18 points or bold 14 points 7:1 when one of the colors is red (or nearly red) and other color is black (or nearly black)

32. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor32 Guideline 26: Contrast for Text Readability 7:1 when one of the colors is red (or nearly red) and other color is black (or nearly black)

33. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor33 Guideline 26: Contrast for Text Readability Pixel Selection Recommendations Most-favorable Pixel Inside Least-favorable Pixel Outside

34. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor34 Guideline 27 Guideline 28 Guideline 26 AverageProtanope

35. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor35 Demos Adjusted for Users with Colorblindness

36. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor36 Guidelines about following coding standards Most of the Requirements are Invisible Coding Practices No way to tell from the screen shots!

37. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor37 Communication between students Communication between instructors Communication between students and instructors Communication with Customer Support

38. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor38 Users with low vision Users with learning disabilities Dragon users

39. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor39 30. Image Buttons & Links If an image represents a control or a link, provide text that can serve the same purpose when images are not available.

40. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor40 30. Image Buttons & Links If an image represents a control or a link, provide text that can serve the same purpose when images are not available.

41. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor41 Guideline 11: Semantic Markup Identify roles (e.g. heading, numbered list, data table) of page elements using conventions for the media type. (And do not misidentify roles by using those conventions solely for their visual effects.) Example of mismatched semantics

42. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor42 Guideline 11: Semantic Markup Identify roles (e.g. heading, numbered list, data table) of page elements using conventions for the media type. (And do not misidentify roles by using those conventions solely for their visual effects.)

43. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor43 Guideline 11: Semantic Markup Identify roles (e.g. heading, numbered list, data table) of page elements using conventions for the media type. (And do not misidentify roles by using those conventions solely for their visual effects.) Example of matched semantics

44. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor44 Guideline 11: Semantic Markup Identify roles (e.g. heading, numbered list, data table) of page elements using conventions for the media type. (And do not misidentify roles by using those conventions solely for their visual effects.)

45. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor45 Reading Order

46. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor46 ARIA Alert from Example Site Test Page ARIA & Controlling Focus

47. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor47 Let the user know the area is dynamic Additional: Provide options if notifications might be disruptive News Updated Hourly Read headline when updated Play Beep when updated Messages from Your Classmates Read headline when updated Play Beep when updated

48. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor48 Using formatting for emphasis is just fine!

49. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor49 Error Example Fix Example

50. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor50 Staying on Task 1. Write text alternatives that serve the same purpose as the image, do not just label the image. 2. Do not use alt-text to provide new information that is not in the image. 3. Do not write text alternatives for images that are merely decorative. (See Pearson Guideline 38) 4. Do not provide more than brief labels for images that only repeat information that is already present in the text.

51. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor51 Tips for Writing Good Alternative Text for Complex Images Effective Descriptions 1. Understand the context. 2. Keep it concise. 3. Start general and move to specifics. 4. Use polished and grammatically correct language. 5. If the image is of a particularly obvious or unique type, consider identifying the type of image (e.g. cartoon, photo). 6. Pay Attention to New Items vs. Items Already Mentioned (i.e. a triangle vs. the triangle). 7. Check your work, by imagining your text in use. Does it serve the same purpose as the image? 8. Especially when describing how something looks, consider asking others to read your description to see if they agree with any poetic interpretations. 9. Does the image suggest any of the structures available in structured text ? Use headings, bulleted lists, numbered lists, definition lists, nested lists and tables to organize long or complex text alternatives. 10. Double check that the data in the text alternative is the same as the data in the original image. 11. Always use the same terminology and reading level that is used in the main text.

52. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor52 Blind Students and Instructors Tactile Graphics – Beyond the required standards Specially Designed Instructor Created Automatic Printing With Audio Ref: http://inhabitat.com/pictures-without-ink-create-tactile-graphics-for-the-blind/ http://www.viewplus.com/products/software/hands-on-learning/

53. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor53 Challenges /Exceptions Do not remove features for accessibility WCAG 2.0 has Exceptions – Sound or image to provide a specific sensory experience – Time Limits The Pearson Guidelines Do Not Many things that seem impossible at first, are actually easy – iPad/Touch Screen Accessibility If something is truly impossible to make accessible to a particular group, that still needs to be documented Ref: http://www.apple.com/accessibility/iphone/vision.html

54. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor54 Questions & Answers 8

55. Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor55 Thank you