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

Presented at LibTechConf 2014. Full write-up at http://cynng.wordpress.com/2014/03/19/libtechconf-presentation-we-are-all-disabled/
--
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 of this session is to get you thinking about what you can do to make web-based services more accessible for all from the beginning and with small amounts of effort.

Transcript

1. Cynthia Ng @TheRealArty LibTechConf 2014
2. Stolen from @mreidsma who stole it from @adr
4. http://www.w3.org/WAI/intro/accessibility.php Web accessibility means that people with disabilities can use the Web.
5. http://wall.alphacoders.com/by_sub_category.php?id=217856
6.  visual  auditory  physical / motor  touch  learning  reading  writing
8. http://www.census.gov/prod/2012pubs/p70-131.pdf
9. https://twitter.com/StatCan_eng/statuses/407940135729508352
10. USA 2010 & Canada 2006 Census
13. http://section508.gov/sites/default/files/documents/Section504.pdf No otherwise qualified individual with a disability [can] be excluded from [...] any program or activity receiving Federal financial assistance
17. Fulton, C. (2011). Web Accessibility, Libraries, and the Law. Information Technology & Libraries, 30(1), 34-43. Lack of statutes or federal laws should not exempt libraries from providing equivalent access to all; it should drive libraries toward it.
18. CC BY-NC-SA http://www.flickr.com/photos/lalalaurie/3620744384/
20. 1. Develop the website 2. Add or adjust things to work with screen readers 3. Launch
22. 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 were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks.
26. CC BY http://www.flickr.com/photos/mapkyca/4520689090/
27. CC BY NC SA http://flickr.com/photos/michaelfitz/3490322415
28. CC BY http://www.flickr.com/photos/jetalone/4694268229/
29. https://medium.com/thoughtful-design/a8b9a581eb62 All Technology is Assistive Technology
31. http://www.animoca.com/en/2012/05/all-the-myriad-androids/
33. 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.
35. 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.
36. The Center for Universal Design. The Principles of Universal Design, Raleigh, NC: North Carolina State University. http://udlhcpss.wordpress.com/historical-foundations/
37. CC BY NC ND http://www.flickr.com/photos/maziarh/7216119402/
38.  each page should have a title  consistent navigation  meaningful order to content  provide multiple ways to discover content  captions or transcripts of audio/video
39.  solid,  clear,  helpful,  usable,  accessible,  easy to understand, and  designed with people in mind first.
44. http://asinthecity.com/2011/05/13/explaining-personas-used-in-ux-design-%E2%80%93-part-2/
45. http://www.3playmedia.com/2013/04/30/accessibility-specialists-understanding-invisible-disabilities-what-means-online-education/
48. CC BY NC SA Slide 38 of http://matthew.reidsrow.com/articles/29
53.  Mobile first  Progressive enhancement  Responsive design
54. http://lukew.com/ff/entry.asp?933 ; CC BY http://www.flickr.com/photos/zeldman/11297516204/ Mobile forces you to focus.
55. https://speakerdeck.com/swwweet/mobile-first-as-difficult-as-doing-things-right?slide=37 Worry about the less capable first.
56. https://the-pastry-box-project.net/scott-jehl/2014-March-7 ; CC BY http://www.flickr.com/photos/zeldman/8484867134/ Progressive Enhancement moves almost all of our dev time and costs to newer browsers, not older ones.
61. http://www.mattanderson.org/blog/2013/02/11/20-great-public-library-websites/
63. Inspired by shouldiuseacarousel.com
68. HTML <a class="assistive-text" href="#site-navigation" title="Skip to menu">Skip to menu</a> 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. */ }
71. <body> <header role="banner"> <h1>site name</h1> <nav id=“menu” role="navigation"> <a href=“...”>Global Nav Link</a> <a href=“...”>Second Nav Link</a> <a href=“...”>Yet Another Nav Link</a> </nav> </header> <div id="content" role="main"> <article role="article"> <!-- your content, a blog post for example --> </article> </div> <div id="secondary" role="complementary"> <!-- typically your sidebar --> </div> <footer role="contentinfo"> copyright and other info </footer> </body>
72. 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
75. http://squizlabs.github.com/HTML_CodeSniffer/
77. http://wave.webaim.org/toolbar/
80.  Use headers properly  Use descriptive links  Describe images  If you embed audio/video, add a link to it  Be clear and concise
81. 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.
82. 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 http://hcil2.cs.umd.edu/trs/2001-17/2001-17.pdf CC BY http://www.flickr.com/photos/marc_smith/3927352695/
84. http://www.w3.org/standards/webdesign/accessibility ; CC BY NC SA http://www.flickr.com/photos/j-o-n-o/151830908/
85. 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
86. 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.
87. Cynthia Ng @TheRealArty about.me/cynthiang