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

Making Web Services Accessible With Universal Design

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.

Cynthia "Arty" Ng

January 22, 2015

More Decks by Cynthia "Arty" Ng

Other Decks in Technology


  1. 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
  2. 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
  3. 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.
  4. 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
  5. [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.
  6. 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
  7. Avoid the peanut butter approach. - Sarah Horton & Whitney

    Quesenbery Horton, S. & Quesenbery, W. (2014). A Web for Everyone: Designing Accessible User Experiences. Rosenfeld Media.
  8. 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/
  9. shrosa814. (2010). Tale of Squirrel and Peanut Butter. With Permission

    from Owner. https://www.flickr.com/photos/shicksba272214/5159576009
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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.
  15. The Center for Universal Design. The Principles of Universal Design,

    Raleigh, NC: North Carolina State University. http://udlhcpss.wordpress.com/historical-foundations/
  16. 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
  17. UNIVERSAL WEB DESIGN SUMMARIZED solid clear helpful usable accessible easy

    to understand designed with people in mind first
  18. 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
  19. TASK ANALYSIS Reidsma, M. (2013). Slide 38. Websites are for

    People. http://matthew.reidsrow.com/articles/29CC BY-NC-SA 3.0
  20. MOBILE FIRST Mobile forces you to focus. - Luke Wroblewski

    @lukew Wroblewski, L. (2009). Mobile First. http://www.lukew.com/ff/entry.asp?933
  21. 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
  22. 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
  23. [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
  24. 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
  25. SKIP LINKS <body> <a class="hide‐text" href="#main">Skip to Main Content</a> <nav

    role="navigation"> // Menu </nav> <div id="main" role="main"> // Content </div> </body> Schofield, M. (2014). ARIA for the Spec Impaired. http://ns4lib.com/aria-primer/
  26. ARIA Accessible Rich Internet Applications Suite <nav role="navigation"> // Menu

    </nav> Reference: ARIA for the Spec Impaired Using ARIA in HTML Recommendation Table
  27. 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
  28. 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/
  29. 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/

    For more, HTML Codesniffer WCAG Contrast Checker WAVE Toolbar W3C Web Accessibility Tools list SIMULATION TOOLS VisCheck Fangs
  31. 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/

    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
  33. 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/
  34. 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
  35. 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
  36. 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