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

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

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.

Cynthia "Arty" Ng

March 19, 2014
Tweet

More Decks by Cynthia "Arty" Ng

Other Decks in Technology

Transcript

  1. Cynthia Ng @TheRealArty LibTechConf 2014

  2. Stolen from @mreidsma who stole it from @adr

  3. None
  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
  7. None
  8. http://www.census.gov/prod/2012pubs/p70-131.pdf

  9. https://twitter.com/StatCan_eng/statuses/407940135729508352

  10. USA 2010 & Canada 2006 Census

  11. None
  12. None
  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
  14. None
  15. None
  16. None
  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/

  19. None
  20. 1. Develop the website 2. Add or adjust things to

    work with screen readers 3. Launch
  21. None
  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.
  23. None
  24. None
  25. None
  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

  30. None
  31. http://www.animoca.com/en/2012/05/all-the-myriad-androids/

  32. None
  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.
  34. None
  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.
  40. None
  41. None
  42. None
  43. None
  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/

  46. None
  47. None
  48. CC BY NC SA Slide 38 of http://matthew.reidsrow.com/articles/29

  49. None
  50. None
  51. None
  52. None
  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.
  57. None
  58. None
  59. None
  60. None
  61. http://www.mattanderson.org/blog/2013/02/11/20-great-public-library-websites/

  62. None
  63. Inspired by shouldiuseacarousel.com

  64. None
  65. None
  66. None
  67. None
  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. */ }
  69. None
  70. None
  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
  73. None
  74. None
  75. http://squizlabs.github.com/HTML_CodeSniffer/

  76. None
  77. http://wave.webaim.org/toolbar/

  78. None
  79. None
  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/
  83. None
  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