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

Access 2014: We’re All Disabled! Part 2: Building Accessible (Web) Services with Universal Design

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.

Cynthia "Arty" Ng

October 01, 2014
Tweet

More Decks by Cynthia "Arty" Ng

Other Decks in Technology

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