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
   

   View Slide

2. WHAT IS WEB ACCESSIBILITY?
   

   View Slide

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
   

   View Slide

4. TYPES OF DISABILITIES
   visual
   auditory
   physical/motor
   touch
   learning
   

   View Slide

5. WHY SHOULD YOU CARE?
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

8. POLICY & LEGISLATION
   Federal Departments & Ontario: Web Content Accessibility
   Guidelines (WCAG)
   

   View Slide

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
   

   View Slide

10. GETTING BUY-IN
    

    View Slide

11. View Slide

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.
    

    View Slide

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
    

    View Slide

14. BENEFITS SIMPLIFIED
    findable
    accessible
    usable
    shareable
    efficient
    collaborative
    

    View Slide

15. APPROACH TO ACCESSIBILITY
    

    View Slide

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.
    

    View Slide

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/
    

    View Slide

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

    View Slide

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
    

    View Slide

20. DESIGNING FOR ASSISTIVE TECHNOLOGY
    

    View Slide

21. ASSISTIVE TECHNOLOGY
    screen readers
    text-to-speech
    screen magnifiers
    joysticks
    mobile devices
    keyboards
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

27. The Center for Universal Design. The Principles of Universal Design, Raleigh, NC: North Carolina State University. http://udlhcpss.wordpress.com/historical-foundations/
    

    View Slide

28. UNIVERSAL DESIGN SUMMARIZED
    equitable
    flexible
    simple
    intuitive
    low effort
    approachable
    usable
    

    View Slide

29. marziarh. (2012). Robson Square. https://www.flickr.com/photos/maziarh/7216119402/CC BY-NC-ND 2.0
    

    View Slide

30. UNIVERSAL DESIGN FOR THE WEB
    

    View Slide

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
    

    View Slide

32. UNIVERSAL WEB DESIGN SUMMARIZED
    solid
    clear
    helpful
    usable
    accessible
    easy to understand
    designed with people in mind first
    

    View Slide

33. UNIVERSAL DESIGN IN PRACTICE
    

    View Slide

34. View Slide

35. MichaelFitz. (2008). Computer Budgie II. https://www.flickr.com/photos/michaelfitz/3490322415
    

    View Slide

36. Greyscale image using http://colorfilter.wickline.org
    

    View Slide

37. tehchix0r. (2012). Texting (Project 365: 242/365). https://www.flickr.com/photos/tehchix0r/8186415277/CC BY-NC-SA 2.0
    

    View Slide

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
    

    View Slide

39. ASK YOUR USERS
    

    View Slide

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
    

    View Slide

41. CONTENT INVENTORY
    

    View Slide

42. CARD SORT
    

    View Slide

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

    View Slide

44. DEVELOPING YOUR SERVICE
    

    View Slide

45. View Slide

46. APPROACHES
    mobile first
    progressive enhancement
    responsive design
    

    View Slide

47. MOBILE FIRST
    Mobile forces you to focus.
    - Luke Wroblewski @lukew
    Wroblewski, L. (2009). Mobile First. http://www.lukew.com/ff/entry.asp?933
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

51. RESPONSIVE DESIGN
    

    View Slide

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
    

    View Slide

53. SOME “SPECIAL” CONSIDERATIONS
    

    View Slide

54. KEYBOARD ACCESSIBILITY
    

    View Slide

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

    View Slide

56. ARIA
    Accessible Rich Internet Applications Suite
    
    // Menu
    
    Reference:
    ARIA for the Spec Impaired
    Using ARIA in HTML Recommendation Table
    

    View Slide

57. MEDIA
    Images: alt=""
    Audio: transcript
    Video: transcript
    Video: captions
    Video: descriptive audio
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

61. DEATH TO THE CAROUSEL
    Inspired by shouldiuseacarousel.com
    

    View Slide

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
    

    View Slide

63. ANALYTICS
    

    View Slide

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/
    

    View Slide

65. USER TESTING
    5 second test
    Lab Task Test
    Guerilla Testing
    Paid Testing (e.g. VIRN)
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

71. TAKE AWAY
    

    View Slide

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
    

    View Slide

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

    View Slide