Slide 1
Slide 1 text
Cynthia Ng
@TheRealArty
LibTechConf 2014
Slide 2
Slide 2 text
Stolen from @mreidsma who stole it from @adr
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
http://www.w3.org/WAI/intro/accessibility.php
Web accessibility means that people
with disabilities can use the Web.
Slide 5
Slide 5 text
http://wall.alphacoders.com/by_sub_category.php?id=217856
Slide 6
Slide 6 text
visual
auditory
physical / motor
touch
learning
reading
writing
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
http://www.census.gov/prod/2012pubs/p70-131.pdf
Slide 9
Slide 9 text
https://twitter.com/StatCan_eng/statuses/407940135729508352
Slide 10
Slide 10 text
USA 2010 & Canada 2006 Census
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
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.
Slide 18
Slide 18 text
CC BY-NC-SA http://www.flickr.com/photos/lalalaurie/3620744384/
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
1. Develop the website
2. Add or adjust things
to work with screen readers
3. Launch
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
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.
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
CC BY http://www.flickr.com/photos/mapkyca/4520689090/
Slide 27
Slide 27 text
CC BY NC SA http://flickr.com/photos/michaelfitz/3490322415
Slide 28
Slide 28 text
CC BY http://www.flickr.com/photos/jetalone/4694268229/
Slide 29
Slide 29 text
https://medium.com/thoughtful-design/a8b9a581eb62
All Technology is
Assistive Technology
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
http://www.animoca.com/en/2012/05/all-the-myriad-androids/
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
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.
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
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.
Slide 36
Slide 36 text
The Center for Universal Design. The Principles of Universal Design, Raleigh, NC: North Carolina State University. http://udlhcpss.wordpress.com/historical-foundations/
Slide 37
Slide 37 text
CC BY NC ND http://www.flickr.com/photos/maziarh/7216119402/
Slide 38
Slide 38 text
each page should have a title
consistent navigation
meaningful order to content
provide multiple ways to discover content
captions or transcripts of audio/video
Slide 39
Slide 39 text
solid,
clear,
helpful,
usable,
accessible,
easy to understand, and
designed with people in mind first.
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
http://asinthecity.com/2011/05/13/explaining-personas-used-in-ux-design-%E2%80%93-part-2/
Slide 45
Slide 45 text
http://www.3playmedia.com/2013/04/30/accessibility-specialists-understanding-invisible-disabilities-what-means-online-education/
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
CC BY NC SA Slide 38 of http://matthew.reidsrow.com/articles/29
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Mobile first
Progressive enhancement
Responsive design
Slide 54
Slide 54 text
http://lukew.com/ff/entry.asp?933 ; CC BY http://www.flickr.com/photos/zeldman/11297516204/
Mobile forces you to focus.
Slide 55
Slide 55 text
https://speakerdeck.com/swwweet/mobile-first-as-difficult-as-doing-things-right?slide=37
Worry about the less
capable first.
Slide 56
Slide 56 text
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.
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
http://www.mattanderson.org/blog/2013/02/11/20-great-public-library-websites/
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Inspired by shouldiuseacarousel.com
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
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. */
}
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
Slide 72
Slide 72 text
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
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
http://squizlabs.github.com/HTML_CodeSniffer/
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
http://wave.webaim.org/toolbar/
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Use headers properly
Use descriptive links
Describe images
If you embed audio/video, add a link to it
Be clear and concise
Slide 81
Slide 81 text
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.
Slide 82
Slide 82 text
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/
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
http://www.w3.org/standards/webdesign/accessibility ; CC BY NC SA http://www.flickr.com/photos/j-o-n-o/151830908/
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
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.
Slide 87
Slide 87 text
Cynthia Ng
@TheRealArty
about.me/cynthiang