Access 2014: We’re All Disabled! Part 2: Building Accessible (Web) Services with Universal Design

This was presented at Access 2014 Conference. Full write-up is available here: http://wp.me/pHQ83-U9
--
Abstract: We’re building and improving tools and services all the time, but do you only develop for the “average” user? We all use “assistive” technology accessing information in a multitude of ways with different platforms, devices, etc. Let’s focus on developing and providing web services that are more accessible not only for those with disabilities, but for everyone.The goal is not only to change our thinking, but also to look at the practical side of things in how we might implement an accessible web service using the open source tools and packages, or within the confines of the software we use.

Transcript

1. WE’RE ALL DISABLED! PART 2: BUILDING ACCESSIBLE (WEB) SERVICES WITH UNIVERSAL DESIGN October 1, 2014 Cynthia Ng @TheRealArty
2. http://bit.ly/arty-accessYYC
3. Sjöblom, N. (2008). Grey seal on Märket. https://www.flickr.com/photos/taivasalla/2830915366CC BY-NC-SA 2.0
4. Anonymous. (2014). Content little screech owl :). http://imgur.com/gallery/NNTTvEU
5. WHAT IS ACCESSIBILITY?
6. 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
7. WHY SHOULD YOU CARE?
8. DISABILITY > MINORITY Policy Legislation
9. GETTING BUY-IN
11. [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.
12. BENEFITS reflect institutional mission, leadership, and values serve all users make sound fiscal policy add value to the institution
13. BENEFITS SIMPLIFIED findable accessible usable shareable efficient collaborative 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. ACCESSIBILITY AT WORK
15. Fettig, S. (2007). Rodin's Thinker. https://www.flickr.com/photos/stevenfettig/1390275600CC BY-NC-SA 2.0
16. APPROACH TO ACCESSIBILITY
17. Avoid the peanut butter approach. - Sarah Horton & Whitney Quesenbery Horton, S. & Quesenbery, W. (2014). A Web for Everyone: Designing Accessible User Experiences. Rosenfeld Media.
18. 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/
19. shrosa814. (2010). Tale of Squirrel and Peanut Butter. With Permission from Owner. https://www.flickr.com/photos/shicksba272214/5159576009
20. 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
21. DESIGNING FOR ASSISTIVE TECHNOLOGY
22. ASSISTIVE TECHNOLOGY screen readers text-to-speech screen magnifiers joysticks mobile devices keyboards
23. Anonymous. (2014). She loves the warm air coming out of the laptop. http://imgur.com/gallery/S3JnsF1
24. 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
25. 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.
26. Whereas [universal design] is a design methodology (similar to user-centered design), [accessibility] is its most commonly associated metric. - Andrew Maler Maler, A. (2013). The Complete Beginner’s Guide to Universal Design. UX Booth http://www.uxbooth.com/articles/the-complete-beginners-guide-to-universal-design/
27. Minter, A. (2011). Hi There. https://www.flickr.com/photos/ehisforadam/6468933943CC BY-NC-ND 2.0
28. BUILDING UNIVERSAL (WEB) SERVICES
29. It is important for designers to formulate and adhere to usable design processes and guidelines throughout the entire cycle of development so that the product or service is accessible and universally usable for all. - Constantine Stephanidis Stephanidis, C. (2009). Universal access and design for all in the evolving information society. In C. Stephanidis (ed.), The Universal Access Handbook (1–11). Boca Raton: CRC Press.
30. ProphetTenebrae. (2012). Red panda face palm. http://imgur.com/gallery/yS8YGZt
31. ASK YOUR USERS
32. 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
33. GETTING USER FEEDBACK
34. 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
35. CONTENT INVENTORY
36. CARD SORT
37. TASK ANALYSIS Reidsma, M. (2013). Slide 38. Websites are for People. http://matthew.reidsrow.com/articles/29CC BY-NC-SA 3.0
38. DEVELOPING YOUR SERVICE
40. APPROACHES mobile first progressive enhancement responsive design
41. 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
42. SOME “SPECIAL” CONSIDERATIONS
43. KEYBOARD ACCESSIBILITY
44. 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/
45. ARIA Accessible Rich Internet Applications Suite <nav role="navigation"> // Menu </nav>
46. MEDIA Images: alt="" Audio: transcript Video: transcript Video: captions Video: descriptive audio
47. 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
48. MrShuffleupagus. (2014). This is a picture I took of a friend's dog, Spike, and the face he makes whenever he's confused. http://imgur.com/gallery/9iGSCj7
49. 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/
50. 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/
51. DEATH TO THE CAROUSEL Inspired by shouldiuseacarousel.com
52. EVALUATING YOUR SERVICE SIMULATION VisCheck Fangs EVALUATION (bookmarklet) (Firefox plugin) HTML Codesniffer WCAG Contrast Checker WAVE Toolbar
53. GUIDELINES FOR YOUR 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
54. 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/
55. ACCESSIBILITY STATEMENT WCAG Conformance Claims Access 8878 Accessibility Statement Template
56. TAKE AWAYS
57. 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
58. One Thumb, One Eyeball - Luke Wroblewski @lukew Wroblewski, L. (2012). Testing One Thumb, One Eyeball Mobile Use. http://www.lukew.com/ff/entry.asp?1664
59. We’re all disabled - Lennard Davis @lendavis Davis, L. J. (2013). The End of Identity Politics: On Disability as an Unstable Category. In L. J. Davis (ed.), The Disability Studies Reader (263-277). New York : Routledge.
60. THANKS! CONTACT Cynthia Ng @TheRealArty about.me/cynthiang