Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Web Services Accessible for Everyone

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.

Cynthia "Arty" Ng

September 07, 2016

More Decks by Cynthia "Arty" Ng

Other Decks in Technology


  1. 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
  2. DISABILITY > MINORITY* * Based on 2010 US census ,

    and the percentage of total population with a disability percentage of total population of minorities.
  3. POLICY & LEGISLATION The Rehabilitation Act (Section 504 and 508)

    Americans with Disabilities Act state legislation organizations, grants, etc.
  4. Avoid the peanut butter approach. - Sarah Horton & Whitney

    Quesenbery Horton, S. & Quesenbery, W. (2014). A Web for Everyone: Designing Accessible User Experiences. Rosenfeld Media.
  5. 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/
  6. shrosa814. (2010). Tale of Squirrel and Peanut Butter. With Permission

    from Owner. https://www. ickr.com/photos/shicksba272214/5159576009
  7. EXAMPLE DEVELOPMENT PROCESS 1. Develop the website. 2. Add or

    adjust things to work with screen readers. 3. Launch (may happen before #2).
  8. 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
  9. 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
  10. 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.
  11. 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.

    have a title. Have consistent navigation. Have a meaningful order to content. Provide multiple ways to discover content. Captions or transcript of audio/video.
  13. 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.
  14. 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
  15. TASK ANALYSIS Reidsma, M. (2013). Slide 38. Websites are for

    People. http://matthew.reidsrow.com/articles/29CC BY-NC-SA 3.0
  16. 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.
  17. 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
  18. 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
  19. MEDIA Images: alt="" Audio: transcript Video: transcript Video: captions Video:

    descriptive audio More A/V: controls, no autoplay Warning! Check the carousel.
  20. 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/
  21. ARIA Accessible Rich Internet Applications Suite <div role="alert"> // warning

    </div> For more on ARIA, check out the WAI-ARIA Overview
  22. ASSESSING YOUR SERVICE SIMULATION VisCheck Fangs EVALUATION (bookmarklet) (Firefox plugin)

    W3C validator HTML Codesniffer WCAG Contrast Checker WAVE Toolbar
  23. 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.
  24. 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/
  25. 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
  26. 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
  27. 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.