$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Cynthia "Arty" Ng

Other Decks in Technology

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