Slide 1
Slide 1 text
MAKING WEB SERVICES
ACCESSIBLE WITH
UNIVERSAL DESIGN
January 22, 2015
Cynthia Ng
@TheRealArty
Slide 2
Slide 2 text
WHAT IS WEB ACCESSIBILITY?
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
TYPES OF DISABILITIES
visual
auditory
physical/motor
touch
learning
Slide 5
Slide 5 text
WHY SHOULD YOU CARE?
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
POLICY & LEGISLATION
Federal Departments & Ontario: Web Content Accessibility
Guidelines (WCAG)
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
GETTING BUY-IN
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
[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.
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
BENEFITS SIMPLIFIED
findable
accessible
usable
shareable
efficient
collaborative
Slide 15
Slide 15 text
APPROACH TO ACCESSIBILITY
Slide 16
Slide 16 text
Avoid the peanut butter approach.
- Sarah Horton & Whitney Quesenbery
Horton, S. & Quesenbery, W. (2014). A Web for Everyone: Designing Accessible User Experiences. Rosenfeld Media.
Slide 17
Slide 17 text
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/
Slide 18
Slide 18 text
shrosa814. (2010). Tale of Squirrel and Peanut Butter. With Permission from Owner.
https://www.flickr.com/photos/shicksba272214/5159576009
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
DESIGNING FOR ASSISTIVE TECHNOLOGY
Slide 21
Slide 21 text
ASSISTIVE TECHNOLOGY
screen readers
text-to-speech
screen magnifiers
joysticks
mobile devices
keyboards
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
animoca. (2012). All the Myriad Androids. http://www.animoca.com/en/2012/05/all-the-myriad-androids/CC-BY-ND 3.0
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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.
Slide 27
Slide 27 text
The Center for Universal Design. The Principles of Universal Design, Raleigh, NC: North Carolina State University. http://udlhcpss.wordpress.com/historical-foundations/
Slide 28
Slide 28 text
UNIVERSAL DESIGN SUMMARIZED
equitable
flexible
simple
intuitive
low effort
approachable
usable
Slide 29
Slide 29 text
marziarh. (2012). Robson Square. https://www.flickr.com/photos/maziarh/7216119402/CC BY-NC-ND 2.0
Slide 30
Slide 30 text
UNIVERSAL DESIGN FOR THE WEB
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
UNIVERSAL WEB DESIGN SUMMARIZED
solid
clear
helpful
usable
accessible
easy to understand
designed with people in mind first
Slide 33
Slide 33 text
UNIVERSAL DESIGN IN PRACTICE
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
MichaelFitz. (2008). Computer Budgie II. https://www.flickr.com/photos/michaelfitz/3490322415
Slide 36
Slide 36 text
Greyscale image using http://colorfilter.wickline.org
Slide 37
Slide 37 text
tehchix0r. (2012). Texting (Project 365: 242/365). https://www.flickr.com/photos/tehchix0r/8186415277/CC BY-NC-SA 2.0
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
ASK YOUR USERS
Slide 40
Slide 40 text
PERSONAS
University of Washington Libraries. (2008). UW Libraries Personas. http://staffweb.lib.washington.edu/news/units/ITS/ux/2009-q2/persona-construction/final-personas/uw-
libraries-personas-overview-of-the-completed-project
Slide 41
Slide 41 text
CONTENT INVENTORY
Slide 42
Slide 42 text
CARD SORT
Slide 43
Slide 43 text
TASK ANALYSIS
Reidsma, M. (2013). Slide 38. Websites are for People. http://matthew.reidsrow.com/articles/29CC BY-NC-SA 3.0
Slide 44
Slide 44 text
DEVELOPING YOUR SERVICE
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
APPROACHES
mobile first
progressive enhancement
responsive design
Slide 47
Slide 47 text
MOBILE FIRST
Mobile forces you to focus.
- Luke Wroblewski @lukew
Wroblewski, L. (2009). Mobile First. http://www.lukew.com/ff/entry.asp?933
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
[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
Slide 51
Slide 51 text
RESPONSIVE DESIGN
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
SOME “SPECIAL” CONSIDERATIONS
Slide 54
Slide 54 text
KEYBOARD ACCESSIBILITY
Slide 55
Slide 55 text
SKIP LINKS
Skip to Main Content
// Menu
// Content
Schofield, M. (2014). ARIA for the Spec Impaired. http://ns4lib.com/aria-primer/
Slide 56
Slide 56 text
ARIA
Accessible Rich Internet Applications Suite
// Menu
Reference:
ARIA for the Spec Impaired
Using ARIA in HTML Recommendation Table
Slide 57
Slide 57 text
MEDIA
Images: alt=""
Audio: transcript
Video: transcript
Video: captions
Video: descriptive audio
Slide 58
Slide 58 text
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
Slide 59
Slide 59 text
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/
Slide 60
Slide 60 text
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/
Slide 61
Slide 61 text
DEATH TO THE CAROUSEL
Inspired by shouldiuseacarousel.com
Slide 62
Slide 62 text
TESTING AND ASSESSMENT
FRAMEWORKS
QuailJS
EVALUATION TOOLS
(bookmarklet)
(Firefox plugin)
For more,
HTML Codesniffer
WCAG Contrast Checker
WAVE Toolbar
W3C Web Accessibility Tools list
SIMULATION TOOLS
VisCheck
Fangs
Slide 63
Slide 63 text
ANALYTICS
Slide 64
Slide 64 text
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/
Slide 65
Slide 65 text
USER TESTING
5 second test
Lab Task Test
Guerilla Testing
Paid Testing (e.g. VIRN)
Slide 66
Slide 66 text
TRAINING AND DOCUMENTATION
GUIDELINES FOR CONTENT CREATORS
1. Be clear 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
Slide 67
Slide 67 text
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/
Slide 68
Slide 68 text
ACCESSIBILITY STATEMENT
WCAG Conformance Claims
Access 8878 Accessibility Statement Template
Slide 69
Slide 69 text
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
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
TAKE AWAY
Slide 72
Slide 72 text
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
Slide 73
Slide 73 text
THANKS!
CONTACT
Cynthia Ng
@TheRealArty
about.me/cynthiang