Making Web Services Accessible With Universal Design

Presented for the Education Institute. For full notes see http://wp.me/pHQ83-WR
--
Building and maintaining web services in an accessible way is not simply a way of serving those with disabilities and meeting policy, but to improve services for all users. Using universal design principles, we can make web services for diverse users, devices, and situations. Fulfilling this goal need not be onerous by starting small and moving forward iteratively. No prior knowledge or experience is even needed to begin stepping in the right direction to providing better services for everyone. The goal is to change our thinking from tacking on considerations for users with disabilities to building that into the process. We will cover background and concepts, as well as practical methods and tools to push towards greater accessibility.

Transcript

1. MAKING WEB SERVICES ACCESSIBLE WITH UNIVERSAL DESIGN January 22, 2015 Cynthia Ng @TheRealArty
2. WHAT IS WEB ACCESSIBILITY?
3. Web accessibility means that people with disabilities can use the Web. - W3C Web Accessibility Initiative (WAI) W3C Web Accessibility Initiative. (2005). What is Web Accessibility. Introduction to Web Accessibility. http://www.w3.org/WAI/intro/accessibility.php
4. TYPES OF DISABILITIES visual auditory physical/motor touch learning
5. WHY SHOULD YOU CARE?
6. Statistics Canada. 2013. Statistics Canada on Twitter. https://twitter.com/StatCan_eng/statuses/407940135729508352 Approximate number based on: World Bank. 2012. Population ages 15-64 (% of total). . http://data.worldbank.org/indicator/SP.POP.1564.TO.ZS
7. DISABILITY > MINORITY* * Based on 2006 Canadian census , and the percentage of total population ages 15-64 with a disability percentage of total population ages 15-64 of minorities.
8. POLICY & LEGISLATION Federal Departments & Ontario: Web Content Accessibility Guidelines (WCAG)
9. Lack of statutes or federal laws should not exempt [us] from providing equivalent access to all; it should drive [us] toward it. - Camilla Fulton Fulton, C. (2011). Web Accessibility, Libraries, and the Law. Information Technology and Libraries.. http://www.w3.org/WAI/intro/accessibility.php
10. GETTING BUY-IN
12. [It is] well known among web developers that websites that are accessible are also much more usable for everyone. - Mohammad Eyadat and Jeff Lew Eyadat, M., & Lew, J. (2011). Web Accessibility Factor a Key Focus for Serving Students. Review of Business Research, 11(2), 80.
13. BENEFITS reflect institutional mission, leadership, and values serve all users make sound fiscal policy add value to the institution Sources: Maler, A. (2013). The Complete Beginner’s Guide to Universal Design. UX Booth. and Rowland, C., Mariger, H., Siegel, P. M., & Whiting, J. (2010). Universal Design for the Digital Environment: Transforming the Institution. EDUCAUSE Review*, 45(6). http://www.uxbooth.com/articles/the-complete-beginners-guide-to-universal-design/ http://www.educause.edu/ero/article/universal-design-digital-environment-transforming-institution
14. BENEFITS SIMPLIFIED findable accessible usable shareable efficient collaborative
15. APPROACH TO ACCESSIBILITY
16. Avoid the peanut butter approach. - Sarah Horton & Whitney Quesenbery Horton, S. & Quesenbery, W. (2014). A Web for Everyone: Designing Accessible User Experiences. Rosenfeld Media.
17. It just won't work to build a complete system and then, in the final stages of development, spread the interface over it like peanut butter. - Clayton Lewis & John Rieman Lewis, C. & Rieman, J. (1994). Task-Centered User Interface Design: A Practical Introduction. http://hcibib.org/tcuid/
18. shrosa814. (2010). Tale of Squirrel and Peanut Butter. With Permission from Owner. https://www.flickr.com/photos/shicksba272214/5159576009
19. Accessibility often gets pigeon-holed as simply making sure there are no barriers to access for screen readers or other assistive technology, without regard to usability. - Whitney Quesenbery @whitneyq Quesenbery, W. (2009). Usable Accessibility: Making Web Sites Work Well for People with Disabilities. UX Matters. http://www.uxmatters.com/mt/archives/2009/02/usable- accessibility-making-web-sites-work-well-for-people-with-disabilities.php
20. DESIGNING FOR ASSISTIVE TECHNOLOGY
21. ASSISTIVE TECHNOLOGY screen readers text-to-speech screen magnifiers joysticks mobile devices keyboards
22. All Technology is Assistive Technology. - Sara Hendren @ablerism Hendron, S. (2013). All Technology is Assistive Technology: 6 dispositions for designers on disability. https://medium.com/thoughtful-design/a8b9a581eb62
23. animoca. (2012). All the Myriad Androids. http://www.animoca.com/en/2012/05/all-the-myriad-androids/CC-BY-ND 3.0
24. Move away from the approach of building separately for disabled users, and concern yourself with creating clean, beautiful, usable, and accessible websites. - Debra Riley-Huff Riley-Huff, D. A. (2012). Web Accessibility and Universal Design. Library Technology Reports, 48(7), 29. http://connection.ebscohost.com/c/articles/83242903/web-accessibility- universal-design
25. There is no average or normal user. - Sara Hendren @ablerism Hendron, S. (2013). All Technology is Assistive Technology: 6 dispositions for designers on disability. https://medium.com/thoughtful-design/a8b9a581eb62
26. UNIVERSAL DESIGN Universal design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design. - Ron Mace Mace, R. (1998). Universal design in housing. Assistive Technology, 10(1), 21-28.
27. The Center for Universal Design. The Principles of Universal Design, Raleigh, NC: North Carolina State University. http://udlhcpss.wordpress.com/historical-foundations/
28. UNIVERSAL DESIGN SUMMARIZED equitable flexible simple intuitive low effort approachable usable
29. marziarh. (2012). Robson Square. https://www.flickr.com/photos/maziarh/7216119402/CC BY-NC-ND 2.0
30. UNIVERSAL DESIGN FOR THE WEB
31. WCAG UNIVERSAL DESIGN EXAMPLES each page should have a title have consistent navigation have a meaningful order to content provide multiple ways to discover content captions or transcript of audio/video
32. UNIVERSAL WEB DESIGN SUMMARIZED solid clear helpful usable accessible easy to understand designed with people in mind first
33. UNIVERSAL DESIGN IN PRACTICE
35. MichaelFitz. (2008). Computer Budgie II. https://www.flickr.com/photos/michaelfitz/3490322415
36. Greyscale image using http://colorfilter.wickline.org
37. tehchix0r. (2012). Texting (Project 365: 242/365). https://www.flickr.com/photos/tehchix0r/8186415277/CC BY-NC-SA 2.0
38. CHALLENGES technological variety user diversity bridging the knowledge gap Shneiderman, B., & Hochheiser, H. (2001). Universal usability as a stimulus to advanced interface design. Behaviour & Information Technology, 20(5), 367-376. doi:10.1080/01449290110083602
39. ASK YOUR USERS
40. PERSONAS University of Washington Libraries. (2008). UW Libraries Personas. http://staffweb.lib.washington.edu/news/units/ITS/ux/2009-q2/persona-construction/final-personas/uw- libraries-personas-overview-of-the-completed-project
41. CONTENT INVENTORY
42. CARD SORT
43. TASK ANALYSIS Reidsma, M. (2013). Slide 38. Websites are for People. http://matthew.reidsrow.com/articles/29CC BY-NC-SA 3.0
44. DEVELOPING YOUR SERVICE
46. APPROACHES mobile first progressive enhancement responsive design
47. MOBILE FIRST Mobile forces you to focus. - Luke Wroblewski @lukew Wroblewski, L. (2009). Mobile First. http://www.lukew.com/ff/entry.asp?933
48. PROGESSIVE ENHANCEMENT Worry about the less capable first. - @Swwweet Usobiaga, J. (2013). Slide 37. Mobile First: As difficult as doing things right. https://speakerdeck.com/swwweet/mobile-first-as-difficult-as-doing-things-right?slide=37
49. Progressive Enhancement moves almost all of our dev time and costs to newer browsers, not older ones. - @scottjehl Jehl, S. (2014). Friday, 7 March 2014. The Pastry Box Project. https://the-pastry-box-project.net/scott-jehl/2014-March-7
50. [Over 50% of mobile users] will wait only five seconds or less for a mobile site to load. Compuware Corporation. (2011). The new (or only) way to connect with customers. http://www.compuware.com/content/dam/compuware/professional-services/white- papers/The%20New%20or%20Only%20Way%20To%20Connect%20With%20Customers.pdf
51. RESPONSIVE DESIGN
52. GOOD PRACTICES well structured code style guides e.g. pattern libraries e.g. polyfills and other helper libraries e.g. APIs e.g. testing frameworks or set of evaluation tools e.g. good documentation e.g. Normalize CSS UI Pattern Library by GVSU picturefill SFU Library API QuailJS Phabricator
53. SOME “SPECIAL” CONSIDERATIONS
54. KEYBOARD ACCESSIBILITY
55. SKIP LINKS <body> <a class="hide‐text" href="#main">Skip to Main Content</a> <nav role="navigation"> // Menu </nav> <div id="main" role="main"> // Content </div> </body> Schofield, M. (2014). ARIA for the Spec Impaired. http://ns4lib.com/aria-primer/
56. ARIA Accessible Rich Internet Applications Suite <nav role="navigation"> // Menu </nav> Reference: ARIA for the Spec Impaired Using ARIA in HTML Recommendation Table
57. MEDIA Images: alt="" Audio: transcript Video: transcript Video: captions Video: descriptive audio
58. DESCRIPTIVE VIDEO EXAMPLE Electrox3d. (2011). Star Wars for Blind People (Blu-ray audio track): description of a Jawa shooting R2!. http://www.youtube.com/watch?v=PCZqKxQME6o
59. TOP 10 ACADEMIC LIBRARY WEBSITES 6 / 10 have carousel 5 / 6 autoplay Singley, E. (2013). Top 10 Academic Library Websites. http://emilysingley.net/top-10-academic-library-websites-2013/
60. TOP 20 PUBLIC LIBRARY WEBSITES 18 / 20 had carousel 17 / 18 autoplay Anderson, M. (2013). 20 Great Public Library Websites. http://www.mattanderson.org/blog/2013/02/11/20-great-public-library-websites/
61. DEATH TO THE CAROUSEL Inspired by shouldiuseacarousel.com
62. TESTING AND ASSESSMENT FRAMEWORKS QuailJS EVALUATION TOOLS (bookmarklet) (Firefox plugin) For more, HTML Codesniffer WCAG Contrast Checker WAVE Toolbar W3C Web Accessibility Tools list SIMULATION TOOLS VisCheck Fangs
63. ANALYTICS
64. HD Wallpapers 3D.com. (n.d.) Heat Map HD Wallpaper 3. . Believed to be in public domain. http://www.hdwallpapers-3d.com/heat-map/heat-map-hd-wallpaper-3/
65. USER TESTING 5 second test Lab Task Test Guerilla Testing Paid Testing (e.g. VIRN)
66. TRAINING AND DOCUMENTATION GUIDELINES FOR CONTENT CREATORS 1. Be clear and concise 2. Use headers and tables properly 3. Use descriptive links 4. Describe images if needed 5. Make and choose videos with captions, and add a link if you embed them
67. MrShuffleupagus. (2014). This is a picture I took of a friend's dog, Spike, and the face he makes whenever he's confused. http://www.4syllables.com.au/2010/12/text- alternatives-decision-tree/
68. ACCESSIBILITY STATEMENT WCAG Conformance Claims Access 8878 Accessibility Statement Template
69. I’ve learned that what matters [...] is an actionable process — possible to use, adapted to the company’s culture and financially effective. - Marcin Treder @marcintreder City of Calgary. (2010). Universal Design Handbook. http://www.calgary.ca/CSPS/CNS/Pages/Publications-guides-and-directories/Universal-Design-Handbook.aspx
70. RESOURCES WCAG Conformance Claims Access 8878 Accessibility Statement Template EXAMPLES Penn State University Libraries Web Accessibility Statement Toronto Public Library Accessibility Policy University of Oxford Accessibility Statement
71. TAKE AWAY
72. Until people find themselves in a situation where they are disabled due to their surroundings, they cannot fully appreciate how the built and virtual environments can throw obstacles in their paths – and indeed, profoundly affect their quality of life. - City of Calgary City of Calgary. (2010). Universal Design Handbook. http://www.calgary.ca/CSPS/CNS/Pages/Publications-guides-and-directories/Universal-Design-Handbook.aspx
73. THANKS! CONTACT Cynthia Ng @TheRealArty about.me/cynthiang