Making Web Services Accessible for Everyone

This was presented for the Florida Libraries Webinar group.
--
We’re building and improving tools and services all the time, but are your web services created only for the "average" user? We all use “assistive” technology accessing information in a multitude of ways with different platforms, devices, and more. Whether you develop web services in-house or work with an external group, you can make your web-based services more accessible for all your users with small amounts of effort.

This session will focus on accessibility of websites, but provide guidelines that apply to all web services. No background knowledge or programming knowledge is required.

Transcript

1. MAKING WEB SERVICES ACCESSIBLE FOR EVERYONE September 7, 2016 Cynthia Ng @TheRealArty
2. nanand. (2008). Lunch! https://www. ickr.com/photos/thartz00/5034435853/CC BY 2.0
3. Appel, M. (2015). Sleeping Red Panda. Public Domain https://www. ickr.com/photos/mathiasappel/23214000449/
4. WHAT IS WEB ACCESSIBILITY?
5. 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
6. WHY SHOULD YOU CARE?
7. DISABILITY > MINORITY* * Based on 2010 US census , and the percentage of total population with a disability percentage of total population of minorities.
8. POLICY & LEGISLATION The Rehabilitation Act (Section 504 and 508) Americans with Disabilities Act state legislation organizations, grants, etc.
9. BENEFITS ndable accessible usable shareable and more!
10. APPROACH TO ACCESSIBILITY
11. Avoid the peanut butter approach. - Sarah Horton & Whitney Quesenbery Horton, S. & Quesenbery, W. (2014). A Web for Everyone: Designing Accessible User Experiences. Rosenfeld Media.
12. It just won't work to build a complete system and then, in the nal 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/
13. shrosa814. (2010). Tale of Squirrel and Peanut Butter. With Permission from Owner. https://www. ickr.com/photos/shicksba272214/5159576009
14. DESIGNING FOR ASSISTIVE TECHNOLOGY
15. EXAMPLE DEVELOPMENT PROCESS 1. Develop the website. 2. Add or adjust things to work with screen readers. 3. Launch (may happen before #2).
16. WHAT IS ASSISTIVE TECHNOLOGY?
17. an umbrella term that includes [...] devices for people with disabilities [...] by enabling people to perform tasks that they were formerly unable to accomplish, or had great dif culty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. - Wikipedia Assistive technology. (2016, August 24). In Wikipedia, The Free Encyclopedia. http://en.wikipedia.org/wiki/Assistive_technology
18. EXAMPLES OF ASSISTIVE TECHNOLOGY screen readers text-to-speech screen magni ers joysticks mobile devices keyboards
19. 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
20. animoca. (2012). All the Myriad Androids. http://www.animoca.com/en/2012/05/all-the-myriad-androids/CC-BY-ND 3.0
21. 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-35.
22. 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.
23. UNIVERSAL DESIGN PRINCIPLES equitable exible simple intuitive low effort approachable usable
24. EXAMPLES FROM WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) 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.
25. BUILDING UNIVERSAL (WEB) SERVICES
26. 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.
27. ProphetTenebrae. (2012). Red panda face palm. http://imgur.com/gallery/yS8YGZt
28. ASK YOUR USERS
29. 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
30. UNDERSTANDING YOUR USERS
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/ nal-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 rst progressive enhancement responsive design
41. Mobile forces you to focus and enables you to innovate in ways you previously couldn’t. - Luke Wroblewski Wroblewski, L. (2011). Mobile First. New York: A Book Apart.
42. Worry about the less capable rst. - Swwweet Usobiaga, J. (2013). Slide 37. Mobile First: As dif cult as doing things right. https://speakerdeck.com/swwweet/mobile- rst-as-dif cult-as-doing-things-right?slide=37
44. SOME GOOD PRACTICES well structured code style guides e.g. pattern libraries e.g. poly lls 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 picture ll SFU Library API Quail Phabricator
45. SOME “SPECIAL” CONSIDERATIONS
46. MEDIA Images: alt="" Audio: transcript Video: transcript Video: captions Video: descriptive audio More A/V: controls, no autoplay Warning! Check the carousel.
47. 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> Scho eld, M. (2014). ARIA for the Spec Impaired. http://ns4lib.com/aria-primer/
48. KEYBOARD ACCESSIBILITY
49. ARIA Accessible Rich Internet Applications Suite <div role="alert"> // warning </div> For more on ARIA, check out the WAI-ARIA Overview
50. ASSESSING YOUR SERVICE SIMULATION VisCheck Fangs EVALUATION (bookmarklet) (Firefox plugin) W3C validator HTML Codesniffer WCAG Contrast Checker WAVE Toolbar
51. 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 or choose videos with captions.
52. ACCESSIBILITY STATEMENT WCAG Conformance Claims Access 8878 Accessibility Statement Template
53. PUTTING IT ALL TOGETHER
54. I’ve learned that what matters [...] is an actionable process — possible to use, adapted to the company’s culture and nancially effective. - Marcin Treder Treder, M. (2012). Beyond Wireframing: The Real-Life UX Design Process. Smashing Magazine. https://www.smashingmagazine.com/2012/08/beyond-wireframing-real-life-ux- design-process/
55. The goal of universal usability is to enable the widest possible range of users to bene t from information and communication services. - Ben Shneiderman 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
56. TAKE AWAYS
57. Until people nd 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. Universal usability is simply good design. - Jonathan Lazar Lazar, J. (2007). Universal usability: designing computer interfaces for diverse user populations. Hoboken, NJ : John Wiley & Sons.
59. THANKS! CONTACT Cynthia Ng @TheRealArty about.me/cynthiang