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
   

   View Slide

2. http://bit.ly/arty-accessYYC
   

   View Slide

3. Sjöblom, N. (2008). Grey seal on Märket. https://www.flickr.com/photos/taivasalla/2830915366CC BY-NC-SA 2.0
   

   View Slide

4. Anonymous. (2014). Content little screech owl :). http://imgur.com/gallery/NNTTvEU
   

   View Slide

5. WHAT IS ACCESSIBILITY?
   

   View Slide

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
   

   View Slide

7. WHY SHOULD YOU CARE?
   

   View Slide

8. DISABILITY > MINORITY
   Policy
   Legislation
   

   View Slide

9. GETTING BUY-IN
   

   View Slide

10. View Slide

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.
    

    View Slide

12. BENEFITS
    reflect institutional mission, leadership, and values
    serve all users
    make sound fiscal policy
    add value to the institution
    

    View Slide

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
    

    View Slide

14. ACCESSIBILITY AT WORK
    

    View Slide

15. Fettig, S. (2007). Rodin's Thinker. https://www.flickr.com/photos/stevenfettig/1390275600CC BY-NC-SA 2.0
    

    View Slide

16. APPROACH TO ACCESSIBILITY
    

    View Slide

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.
    

    View Slide

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/
    

    View Slide

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

    View Slide

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
    

    View Slide

21. DESIGNING FOR ASSISTIVE TECHNOLOGY
    

    View Slide

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

    View Slide

23. Anonymous. (2014). She loves the warm air coming out of the laptop. http://imgur.com/gallery/S3JnsF1
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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/
    

    View Slide

27. Minter, A. (2011). Hi There. https://www.flickr.com/photos/ehisforadam/6468933943CC BY-NC-ND 2.0
    

    View Slide

28. BUILDING UNIVERSAL (WEB) SERVICES
    

    View Slide

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.
    

    View Slide

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

    View Slide

31. ASK YOUR USERS
    

    View Slide

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
    

    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/final-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 first
    progressive enhancement
    responsive design
    

    View Slide

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
    

    View Slide

42. SOME “SPECIAL” CONSIDERATIONS
    

    View Slide

43. KEYBOARD ACCESSIBILITY
    

    View Slide

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

    View Slide

45. ARIA
    Accessible Rich Internet Applications Suite
    
    // Menu
    
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

51. DEATH TO THE CAROUSEL
    Inspired by shouldiuseacarousel.com
    

    View Slide

52. EVALUATING YOUR SERVICE
    SIMULATION
    VisCheck
    Fangs
    EVALUATION
    (bookmarklet)
    (Firefox plugin)
    HTML Codesniffer
    WCAG Contrast Checker
    WAVE Toolbar
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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

    View Slide

56. TAKE AWAYS
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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

    View Slide