We Are All Disabled: Making Your Part of the Web Accessible

Presented at Code4Lib 2014: Full write-up at http://cynng.wordpress.com/2014/03/26/code4lib-presentation-we-are-all-disabled-universal-web-design-making-web-services-accessible-for-everyone/
--
We’re building and improving tools and services all the time, but do you only develop for the “average” user or add things for “disabled” users? We all use “assistive” technology accessing information in a multitude of ways with different platforms, devices, etc. Let’s focus on providing web services that are accessible to everyone without it being onerous or ugly. The aim is to get you thinking about what you can do to make web-based services and content more accessible for all from the beginning or with small amounts of effort whether you're a developer or not.

The goal of the presentation is to provide both developers and content creators with information on simple, practical ways to make web content and web services more accessible. However, rather than thinking about putting in extra effort or making adjustment for those with disabilities, I want to help people think about how to make their websites more accessible for all users through universal web design.

Transcript

1. Cynthia Ng
   @TheRealArty
   Code4Lib 2014
   

   View Slide

2. CC BY ND http://www.flickr.com/photos/tambako/3443007398/
   

   View Slide

3. https://twitter.com/CuteEmergency/status/444844255329411072/photo/1
   

   View Slide

4. CC BY NC http://www.flickr.com/photos/hunty66/390350345/
   

   View Slide

5. CC BY NC http://www.flickr.com/photos/luckyno3/8262860521/
   

   View Slide

6. View Slide

7. http://www.w3.org/WAI/intro/accessibility.php
   Web accessibility means that people
   with disabilities can use the Web.
   

   View Slide

8. http://wall.alphacoders.com/by_sub_category.php?id=217856
   

   View Slide

9. View Slide

10. Based on the USA 2010 Census & Canada 2006 Census
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. CC BY-NC-SA http://www.flickr.com/photos/lalalaurie/3620744384/
    

    View Slide

15. View Slide

16. View Slide

17. http://en.wikipedia.org/wiki/Assistive_technology
    An umbrella term that includes [...] devices for
    people with disabilities [...] by enabling people to
    perform tasks that they […] had great difficulty
    accomplishing, by […] changing methods of
    interacting with the technology needed to
    accomplish such tasks.
    

    View Slide

18. View Slide

19. View Slide

20. CC BY http://www.flickr.com/photos/mapkyca/4520689090/
    

    View Slide

21. CC BY NC SA http://flickr.com/photos/michaelfitz/3490322415
    

    View Slide

22. CC BY http://www.flickr.com/photos/jetalone/4694268229/
    

    View Slide

23. https://medium.com/thoughtful-design/a8b9a581eb62
    All Technology is
    Assistive Technology
    

    View Slide

24. View Slide

25. http://www.animoca.com/en/2012/05/all-the-myriad-androids/
    

    View Slide

26. View Slide

27. Riley-Huff, D. A. (2012). Web Accessibility and Universal Design. Library Technology Reports, 48(7), 29-35.
    Move away from the approach of building
    separately for disabled users, and concern yourself
    with creating clean, beautiful, usable, and accessible
    websites.
    

    View Slide

28. View Slide

29. http://www.ncsu.edu/ncsu/design/cud/about_ud/about_ud.htm
    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.
    

    View Slide

30. CC BY NC ND http://www.flickr.com/photos/maziarh/7216119402/
    

    View Slide

31.  consistent navigation,
     meaningful order to content, and
     provide multiple ways to discover content
    

    View Slide

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

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. CC BY NC SA Slide 38 of http://matthew.reidsrow.com/articles/29
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41.  Mobile first
     Progressive enhancement
     Responsive design
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. shouldiuseacarousel.com
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. HTML
    Skip to menu
    CSS
    .assistive-text {
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute
    !important;
    }
    .assistive-text:focus {
    clip: auto !important;
    display: block;
    position: absolute;
    z-index: 100000;
    /* insert position, border,
    color, font size, etc. */
    }
    

    View Slide

52. View Slide

53. View Slide

54. 
    
    site name
    
    Global Nav Link
    Second Nav Link
    Yet Another Nav Link
    
    
    
    
    
    
    
    
    
    
    copyright and other info
    
    

    View Slide

55. The Paciello Group Blog
    blog.paciellogroup.com
    The Accessibility Project
    a11yproject.com
    ARIA for the Spec Impaired
    ns4lib.com/aria-primer
    Using ARIA in HTML
    w3.org/TR/aria-in-html
    

    View Slide

56. View Slide

57. View Slide

58. http://squizlabs.github.com/HTML_CodeSniffer/
    

    View Slide

59. View Slide

60. http://wave.webaim.org/toolbar/
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64.  Use headers properly
     Use descriptive links
     Describe your Images
     If you embed audio/video, add a link to
    the original
     Be clear and concise
    

    View Slide

65. http://uxdesign.smashingmagazine.com/2012/08/29/beyond-wireframing-real-life-ux-design-process/
    I’ve learned that what matters [...]
    is an actionable process — possible to use,
    adapted to the company’s culture and
    financially effective.
    

    View Slide

66. View Slide

67. http://www.w3.org/standards/webdesign/accessibility ; CC BY NC SA http://www.flickr.com/photos/j-o-n-o/151830908/
    

    View Slide

68. Book: Bending Over Backwards: Disability, Dismodernism and Other Difficult Positions
    CC BY NC ND http://www.fondazionebassetti.org/en/focus/2010/07/a_man_his_history_and_his_dna.html
    We’re all disabled
    

    View Slide

69. Book: Universal usability: designing computer interfaces for diverse user populations
    CC BY http://www.flickr.com/photos/marc_smith/6076488785/
    Universal usability is
    simply good design.
    

    View Slide

70. Cynthia Ng
    @TheRealArty
    about.me/cynthiang
    

    View Slide