Slide 1
Slide 1 text
MAKING WEB SERVICES
ACCESSIBLE FOR
EVERYONE
September 7, 2016
Cynthia Ng
@TheRealArty
Slide 2
Slide 2 text
nanand. (2008). Lunch! https://www. ickr.com/photos/thartz00/5034435853/CC BY 2.0
Slide 3
Slide 3 text
Appel, M. (2015). Sleeping Red Panda. Public Domain
https://www. ickr.com/photos/mathiasappel/23214000449/
Slide 4
Slide 4 text
WHAT IS WEB ACCESSIBILITY?
Slide 5
Slide 5 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 6
Slide 6 text
WHY SHOULD YOU CARE?
Slide 7
Slide 7 text
DISABILITY > MINORITY*
* Based on 2010 US census , and the
percentage of total population with a disability percentage of total population of minorities.
Slide 8
Slide 8 text
POLICY & LEGISLATION
The Rehabilitation Act (Section 504 and 508)
Americans with Disabilities Act
state legislation
organizations, grants, etc.
Slide 9
Slide 9 text
BENEFITS
ndable
accessible
usable
shareable
and more!
Slide 10
Slide 10 text
APPROACH TO ACCESSIBILITY
Slide 11
Slide 11 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 12
Slide 12 text
It just won't work to build a complete
system and then, in the nal 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 13
Slide 13 text
shrosa814. (2010). Tale of Squirrel and Peanut Butter. With Permission from Owner.
https://www. ickr.com/photos/shicksba272214/5159576009
Slide 14
Slide 14 text
DESIGNING FOR ASSISTIVE TECHNOLOGY
Slide 15
Slide 15 text
EXAMPLE DEVELOPMENT PROCESS
1. Develop the website.
2. Add or adjust things to work with screen readers.
3. Launch (may happen before #2).
Slide 16
Slide 16 text
WHAT IS ASSISTIVE TECHNOLOGY?
Slide 17
Slide 17 text
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 dif culty
accomplishing, by providing
enhancements to, or changing methods
of interacting with, the technology
needed to accomplish such tasks.
- Wikipedia
Assistive technology. (2016, August 24). In Wikipedia, The Free Encyclopedia. http://en.wikipedia.org/wiki/Assistive_technology
Slide 18
Slide 18 text
EXAMPLES OF ASSISTIVE TECHNOLOGY
screen readers
text-to-speech
screen magni ers
joysticks
mobile devices
keyboards
Slide 19
Slide 19 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 20
Slide 20 text
animoca. (2012). All the Myriad Androids. http://www.animoca.com/en/2012/05/all-the-myriad-androids/CC-BY-ND 3.0
Slide 21
Slide 21 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-35.
Slide 22
Slide 22 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 23
Slide 23 text
UNIVERSAL DESIGN PRINCIPLES
equitable
exible
simple
intuitive
low effort
approachable
usable
Slide 24
Slide 24 text
EXAMPLES FROM WEB CONTENT ACCESSIBILITY GUIDELINES
(WCAG)
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 25
Slide 25 text
BUILDING UNIVERSAL (WEB) SERVICES
Slide 26
Slide 26 text
It is important for designers to
formulate and adhere to usable design
processes and guidelines throughout
the entire cycle of development so that
the product or service is accessible and
universally usable for all.
- Constantine Stephanidis
Stephanidis, C. (2009). Universal access and design for all in the evolving information society. In C. Stephanidis (ed.), The Universal Access Handbook (1–11). Boca Raton: CRC
Press.
Slide 27
Slide 27 text
ProphetTenebrae. (2012). Red panda face palm. http://imgur.com/gallery/yS8YGZt
Slide 28
Slide 28 text
ASK YOUR USERS
Slide 29
Slide 29 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 30
Slide 30 text
UNDERSTANDING YOUR USERS
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
GETTING USER FEEDBACK
Slide 34
Slide 34 text
PERSONAS
University of Washington Libraries. (2008). UW Libraries Personas. http://staffweb.lib.washington.edu/news/units/ITS/ux/2009-q2/persona-construction/ nal-personas/uw-
libraries-personas-overview-of-the-completed-project
Slide 35
Slide 35 text
CONTENT INVENTORY
Slide 36
Slide 36 text
CARD SORT
Slide 37
Slide 37 text
TASK ANALYSIS
Reidsma, M. (2013). Slide 38. Websites are for People. http://matthew.reidsrow.com/articles/29CC BY-NC-SA 3.0
Slide 38
Slide 38 text
DEVELOPING YOUR SERVICE
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
APPROACHES
mobile rst
progressive enhancement
responsive design
Slide 41
Slide 41 text
Mobile forces you to focus and enables
you to innovate in ways you previously
couldn’t.
- Luke Wroblewski
Wroblewski, L. (2011). Mobile First. New York: A Book Apart.
Slide 42
Slide 42 text
Worry about the less capable rst.
- Swwweet
Usobiaga, J. (2013). Slide 37. Mobile First: As dif cult as doing things right. https://speakerdeck.com/swwweet/mobile- rst-as-dif cult-as-doing-things-right?slide=37
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
SOME GOOD PRACTICES
well structured code
style guides e.g.
pattern libraries e.g.
poly lls 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
picture ll
SFU Library API
Quail
Phabricator
Slide 45
Slide 45 text
SOME “SPECIAL” CONSIDERATIONS
Slide 46
Slide 46 text
MEDIA
Images: alt=""
Audio: transcript
Video: transcript
Video: captions
Video: descriptive audio
More A/V: controls, no autoplay
Warning! Check the carousel.
Slide 47
Slide 47 text
SKIP LINKS
Skip to Main Content
// Menu
// Content
Scho eld, M. (2014). ARIA for the Spec Impaired. http://ns4lib.com/aria-primer/
Slide 48
Slide 48 text
KEYBOARD ACCESSIBILITY
Slide 49
Slide 49 text
ARIA
Accessible Rich Internet Applications Suite
// warning
For more on ARIA, check out the WAI-ARIA Overview
Slide 50
Slide 50 text
ASSESSING YOUR SERVICE
SIMULATION
VisCheck
Fangs
EVALUATION
(bookmarklet)
(Firefox plugin)
W3C validator
HTML Codesniffer
WCAG Contrast Checker
WAVE Toolbar
Slide 51
Slide 51 text
GUIDELINES FOR YOUR CONTENT CREATORS
1. Be clear and concise.
2. Use headers and tables properly.
3. Use descriptive links.
4. Describe images if needed.
5. Make or choose videos with captions.
Slide 52
Slide 52 text
ACCESSIBILITY STATEMENT
WCAG Conformance Claims
Access 8878 Accessibility Statement Template
Slide 53
Slide 53 text
PUTTING IT ALL TOGETHER
Slide 54
Slide 54 text
I’ve learned that what matters [...] is an
actionable process — possible to use,
adapted to the company’s culture and
nancially effective.
- Marcin Treder
Treder, M. (2012). Beyond Wireframing: The Real-Life UX Design Process. Smashing Magazine. https://www.smashingmagazine.com/2012/08/beyond-wireframing-real-life-ux-
design-process/
Slide 55
Slide 55 text
The goal of universal usability is to
enable the widest possible range of
users to bene t from information and
communication services.
- Ben Shneiderman
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 56
Slide 56 text
TAKE AWAYS
Slide 57
Slide 57 text
Until people nd 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 58
Slide 58 text
Universal usability is simply good
design.
- Jonathan Lazar
Lazar, J. (2007). Universal usability: designing computer interfaces for diverse user populations. Hoboken, NJ : John Wiley & Sons.
Slide 59
Slide 59 text
THANKS!
CONTACT
Cynthia Ng
@TheRealArty
about.me/cynthiang