When it comes to creating an accessible web tool, a lot goes into the secret sauce. You need to know what works with every dietary need: keyboards, screen-readers, etc. If you are interested in making accessible things, this session is for you! This session will be presented cooking show style--explaining step-by-step what we did at to make it and how we tested to make sure we are on the right track. You will learn how to prepare a fully accessible treat by following us through this single recipe.

1. Recipe for Success:
The Secret Sauce for Making
Interactive Content Work for
Everyone
A Grandmother’s Recipe Box by Benedicto De Jesus, on Flickr, https://www.flickr.com/photos/bendjsf/15439498842
#tie3

2. Nikki Massaro Kauffman
Multimedia Manager
Penn State World Campus
nikkimk@psu.edu
@nikkimk
#tie3

9. Who is sharing your table
is more important than what is on your table.

10. I don’t just make interactive content:
I make shared experiences.

11. Meals & learning should be...
● Interactive
● Collaborative
● Inclusive

12. Brown v. Board of Education of Topeka 347 U.S. 483 (1954)
Section 508-compatible version
available upon request.
We conclude that, in the field
of public education, the
doctrine of "separate but
equal" has no place. Separate
educational facilities are
inherently unequal.

13. Types of Disability
● Cognitive
● Social
● Hearing
● Mobility
● Vision
Source: https://www.w3.org/WAI/WCAG20/glance/

14. Plan a
learning
potluck.
Provide options
for everyone.Image, “#Yummy Office #Potluck Lunch” by Hicham Souilmi on Flickr:
https://www.flickr.com/photos/hichamblog/16051168875

16. Universal Design
is innovation.

17. http://www.foodbeast.com/news/23-adorable-valentines-fails-that-still-deserve-points-for-trying/

18. http://www.foodbeast.com/news/23-adorable-valentines-fails-that-still-deserve-points-for-trying/

19. Making Food & Interactives
● Nobody gets it right on the first try.
● Step-by-step demonstration is helpful.
● Each step requires “taste testing.”
● No “one way” to do things.
● Even if you don’t make them, it’s good to know
what’s in them.

20. Ingredients
Image by jh_tan84, https://www.flickr.com/photos/21045446@N00/14687568609

21. Universal Design
the process of creating products that are
accessible to people with a wide range of
abilities, disabilities, and other
characteristics
Source: http://www.washington.edu/doit/what-universal-design-0

22. Universal Design for Learning (UDL)
Provide options for...
● how students engage with learning.
● how content is presented.
● student actions and expressions.
Source: Rose, David (2014). Universal Design for Learning. CAST. http://cast.org/udl/index.html

23. Adapting Inaccessible Content
● Provide several options for content.
● Allow option to pair with someone who can
access the interactive tools.
● Make your own interactives so that anyone can
use them.

24. Utensils
Image, “Baking at home” by James Mellers: https://www.flickr.com/photos/thismanslife/6137492503

25. Utensils
● Internet Explorer
● JAWS
● WAVE
● Kurzweil

26. Browser & Assistive Technology Pairings
● 23.9%- JAWS with IE
● 14.9% - Window-Eyes with IE
● 11.4% - NVDA with Firefox
● 9.8% - ZoomText with IE
● 6.9% - ZoomText with Firefox
● 6.8%- VoiceOver with Safari
Source: Screen Reader User Survey #6 Results
http://webaim.org/projects/screenreadersurvey6/#demographics

27. WAVE Toolbar
● Free tool
● Easy to use
● Provides feedback on code, read order, and
color contrast
● Will catch many issues, but not all of them.

28. Version 1

29. Kurzweil

30. Kurzweil & Interactive Content
● 2X as many students as JAWS
● Dynamic content doesn’t always load
● Printing is a workaround
Party like it’s 1999!

31. Text Versions of Interactive Content
● Accessible
● Printable
● Resizable
● Searchable
● Low cost
● Suitable for auditory and visual learners

32. Preparation
Image by Guy Dickinson, https://www.flickr.com/photos/gfhdickinson/4984562785

33. Text-First Preparation
● Start with text-based linear version.
● Think about sequence/read order.
● Script how content will be read by screen
readers.
● Design about how content appears in print.

35. #tie3

36. http://bit.ly/heweb17tie3
#tie3

38. Image by USDA, https://www.flickr.com/photos/usdagov/7008317739
Cooking & Testing

39. (So do JAWS users.)
Sighted
users scan
headings.

40. JAWS
Headings List
Headings are how
screenreader
users scan a page.

41. Regions:
Because having it all run
together ruins the experience.
Image, Bento by Jeff Kramer, https://www.flickr.com/photos/jeffk/2514237584

42. Visible Regions

43. JAWS Regions

44. Labels are
important.

45. Field Label

46. Image, “when chopstick meet fork & spoon” by Lohb on Flickr: https://www.flickr.com/photos/kopitehtarik/4386540258
Design for multiple inputs.

47. Using tab key
reveals a
drop-down
menu that
works for
keyboard
users.

48. Don’t forget about the keyboard user!
✓ Can you use the tab key to navigate?
✓ Does the tab order make sense?
✓ Can you see where you are focused?
✓ Does focusing on something do the same thing as
hovering with a mouse?
✓ Can you use enter/spacebar instead of clicking?

49. Modal Dialogs:
What to Do When Your Pop-Up is Toast!
Image “Learning to Cook Level 1 - FAILED” by Craig Sunter: https://www.flickr.com/photos/16210667@N02/17230428864

50. We can see a
dialog. We need to
tell the screen
reader.

51. A mouse can’t click
here, but a screen
reader can.

52. Plating
(What You See Matters)
Image by N Wong, https://www.flickr.com/photos/nwongpr/8355767926

53. For each interaction, ask...
✓ What do we show/hide on a desktop?
✓ What do we show/hide on mobile?
✓ What do we show/hide when printed?
✓ What do we show/hide for a screen reader?

54. Describe the
progress bar
for screen
readers.

55. Hide the
arrows
From screen
readers.

56. Error Handling:
It’s in there!

57. Because Everyone Makes Mistakes...
● UD Principle #5 - Tolerance for error.
● WCAG Guideline 3.3 - Input Assistance: Help
users avoid and correct mistakes.

58. Previous
Button
Disable
d Next
Button

59. Hidden
Previous
Button

60. Error
Messages

61. Taste Testing

62. Taste-Tester Testimonial:
“Very impressive! I was able to successfully create
my own bio through this site…
I even want to have the source code. Thanks for
giving me the opportunity to take a glance over
your invention. Great!”

63. Garnishes:
They’re not for all palates.
Image, “Pico de Gallo” by bradleypjohnson: https://www.flickr.com/photos/bradleypjohnson/5633982722

64. Guess which
browser can’t
download
this...
HINT: It rhymes with
“Internet Abhorrer”

66. Browser & Assistive Technology Pairings
● 23.9%- JAWS with IE
● 14.9% - Window-Eyes with IE
● 11.4% - NVDA with Firefox
● 9.8% - ZoomText with IE
● 6.9% - ZoomText with Firefox
● 6.8%- VoiceOver with Safari
Source: Screen Reader User Survey #6 Results
http://webaim.org/projects/screenreadersurvey6/#demographics

67. I Believe...
● Interactive media aids learning.
● Collaboration adds value to the learning
environment.
● Inclusion is a right, and we all benefit from it.

68. I Believe...
● Alternate versions are separate, but not equal.
● Universal design is innovation.

69. Don’t just provide interactive content;
Provide shared experiences.

70. Tomorrow,
I’ll be at the table
When company comes.
Nobody’ll dare
Say to me,
“Eat in the kitchen,"
Then.
Excerpt from “I, Too” by Langston Hughes

71. Questions

72. Nikki Massaro Kauffman
Multimedia Manager
Penn State World Campus
nikkimk@psu.edu
@nikkimk
#tie3

73. Resources
Image, “Spices” by Brianna Lehman https://www.flickr.com/photos/enigmachck/3304428614

74. Sonya Woods
Accessibility Consultant
Penn State World
Campus
(Our Secret Ingredient)
szw151@psu.edu
@sonya4access

75. Other Resources
● https://www.edx.org/course/information-communication
-
Technology-ict-gtx-ict100x
● https://www.youtube.com/watch?v=5ZPz67Io94E
● http://www.slideshare.net/maxdesign/building-accessible-
web-components-without-tears
● http://a11yproject.com/