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
   

   View Slide

2. nanand. (2008). Lunch! https://www. ickr.com/photos/thartz00/5034435853/CC BY 2.0
   

   View Slide

3. Appel, M. (2015). Sleeping Red Panda. Public Domain
   https://www. ickr.com/photos/mathiasappel/23214000449/
   

   View Slide

4. WHAT IS WEB ACCESSIBILITY?
   

   View Slide

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
   

   View Slide

6. WHY SHOULD YOU CARE?
   

   View Slide

7. DISABILITY > MINORITY*
   * Based on 2010 US census , and the
   percentage of total population with a disability percentage of total population of minorities.
   

   View Slide

8. POLICY & LEGISLATION
   The Rehabilitation Act (Section 504 and 508)
   Americans with Disabilities Act
   state legislation
   organizations, grants, etc.
   

   View Slide

9. BENEFITS
   ndable
   accessible
   usable
   shareable
   and more!
   

   View Slide

10. APPROACH TO ACCESSIBILITY
    

    View Slide

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.
    

    View Slide

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/
    

    View Slide

13. shrosa814. (2010). Tale of Squirrel and Peanut Butter. With Permission from Owner.
    https://www. ickr.com/photos/shicksba272214/5159576009
    

    View Slide

14. DESIGNING FOR ASSISTIVE TECHNOLOGY
    

    View Slide

15. EXAMPLE DEVELOPMENT PROCESS
    1. Develop the website.
    2. Add or adjust things to work with screen readers.
    3. Launch (may happen before #2).
    

    View Slide

16. WHAT IS ASSISTIVE TECHNOLOGY?
    

    View Slide

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
    

    View Slide

18. EXAMPLES OF ASSISTIVE TECHNOLOGY
    screen readers
    text-to-speech
    screen magni ers
    joysticks
    mobile devices
    keyboards
    

    View Slide

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
    

    View Slide

20. animoca. (2012). All the Myriad Androids. http://www.animoca.com/en/2012/05/all-the-myriad-androids/CC-BY-ND 3.0
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

23. UNIVERSAL DESIGN PRINCIPLES
    equitable
    exible
    simple
    intuitive
    low effort
    approachable
    usable
    

    View Slide

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.
    

    View Slide

25. BUILDING UNIVERSAL (WEB) SERVICES
    

    View Slide

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.
    

    View Slide

27. ProphetTenebrae. (2012). Red panda face palm. http://imgur.com/gallery/yS8YGZt
    

    View Slide

28. ASK YOUR USERS
    

    View Slide

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
    

    View Slide

30. UNDERSTANDING YOUR USERS
    

    View Slide

31. View Slide

32. View Slide

33. GETTING USER FEEDBACK
    

    View Slide

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
    

    View Slide

35. CONTENT INVENTORY
    

    View Slide

36. CARD SORT
    

    View Slide

37. TASK ANALYSIS
    Reidsma, M. (2013). Slide 38. Websites are for People. http://matthew.reidsrow.com/articles/29CC BY-NC-SA 3.0
    

    View Slide

38. DEVELOPING YOUR SERVICE
    

    View Slide

39. View Slide

40. APPROACHES
    mobile rst
    progressive enhancement
    responsive design
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

43. View Slide

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
    

    View Slide

45. SOME “SPECIAL” CONSIDERATIONS
    

    View Slide

46. MEDIA
    Images: alt=""
    Audio: transcript
    Video: transcript
    Video: captions
    Video: descriptive audio
    More A/V: controls, no autoplay
    Warning! Check the carousel.
    

    View Slide

47. SKIP LINKS
    
    Skip to Main Content
    
    // Menu
    
    
    // Content
    
    
    Scho eld, M. (2014). ARIA for the Spec Impaired. http://ns4lib.com/aria-primer/
    

    View Slide

48. KEYBOARD ACCESSIBILITY
    

    View Slide

49. ARIA
    Accessible Rich Internet Applications Suite
    
    // warning
    
    For more on ARIA, check out the WAI-ARIA Overview
    

    View Slide

50. ASSESSING YOUR SERVICE
    SIMULATION
    VisCheck
    Fangs
    EVALUATION
    (bookmarklet)
    (Firefox plugin)
    W3C validator
    HTML Codesniffer
    WCAG Contrast Checker
    WAVE Toolbar
    

    View Slide

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.
    

    View Slide

52. ACCESSIBILITY STATEMENT
    WCAG Conformance Claims
    Access 8878 Accessibility Statement Template
    

    View Slide

53. PUTTING IT ALL TOGETHER
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

56. TAKE AWAYS
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

59. THANKS!
    CONTACT
    Cynthia Ng
    @TheRealArty
    about.me/cynthiang
    

    View Slide