Making Web Services Accessible With Universal Design

Cynthia Ng
@TheRealArty
January 22, 2015

What is Web Accessibility?

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

Types of Disabilities

visual
auditory
physical/motor
touch
learning

Why Should You Care?

icon of 10 people, one of which is coloured in

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.

Disability > Minority*

* Based on 2006 Canadian census percentage of total population ages 15-64 with a disability, and the percentage of total population ages 15-64 of minorities.

Policy & Legislation

Federal Departments & Ontario: Web Content Accessibility Guidelines (WCAG)

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

Getting Buy-in

[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.

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. http://www.uxbooth.com/articles/the-complete-beginners-guide-to-universal-design/ 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.educause.edu/ero/article/universal-design-digital-environment-transforming-institution

reflect institutional mission, leadership, and values, - okay assuming your institution has something about equal access
serve all users, - not just those with disabilities, and I’ll talk more about this
make sound fiscal policy, - since it improves efficiency and reduces costs while maintaining quality, avoids retrofitting, inequitable solutions, litigation; frequently fulfills grant/contract requirements - and
add value to the institution. - because you have a better website, it benefits more people (e.g. captions to help people with varying language skills), loads more quickly in browsers, requires less bandwidth, is easier to maintain and update, tends to have a higher return in search engines, and higher compatibility with various software and hardware.

Benefits Simplified

findable
accessible
usable
shareable
efficient
collaborative

Approach to Accessibility

Avoid the peanut butter approach.
- Sarah Horton & Whitney Quesenbery

Horton, S. & Quesenbery, W. (2014). A Web for Everyone: Designing Accessible User Experiences. Rosenfeld Media.

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/

squirrel with its head in a peanut butter jar

shrosa814. (2010). Tale of Squirrel and Peanut Butter. https://www.flickr.com/photos/shicksba272214/5159576009 With Permission from Owner.

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

Designing for Assistive Technology

Assistive Technology

screen readers
text-to-speech
screen magnifiers
joysticks
mobile devices
keyboards

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

animoca. (2012). All the Myriad Androids. http://www.animoca.com/en/2012/05/all-the-myriad-androids/ CC-BY-ND 3.0

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

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

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.

The Center for Universal Design. The Principles of Universal Design, Raleigh, NC: North Carolina State University. http://udlhcpss.wordpress.com/historical-foundations/

Universal Design Summarized

equitable
flexible
simple
intuitive
low effort
approachable
usable

marziarh. (2012). Robson Square. https://www.flickr.com/photos/maziarh/7216119402/ CC BY-NC-ND 2.0

Universal Design for the Web

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

Universal Web Design Summarized

solid
clear
helpful
usable
accessible
easy to understand
designed with people in mind first

Universal Design in Practice

MichaelFitz. (2008). Computer Budgie II. https://www.flickr.com/photos/michaelfitz/3490322415

Greyscale image using http://colorfilter.wickline.org

tehchix0r. (2012). Texting (Project 365: 242/365). https://www.flickr.com/photos/tehchix0r/8186415277/ CC BY-NC-SA 2.0

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

Ask Your Users

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

Content Inventory

Card Sort

Task Analysis

picture of whiteboard with writing and screenshots

Reidsma, M. (2013). Slide 38. Websites are for People. http://matthew.reidsrow.com/articles/29 CC BY-NC-SA 3.0

Developing Your Service

Approaches

Mobile First

Mobile forces you to focus.
- Luke Wroblewski @lukew

Wroblewski, L. (2009). Mobile First. http://www.lukew.com/ff/entry.asp?933

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

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

[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

Responsive Design

Good Practices

well structured code
style guides e.g. Normalize CSS
pattern libraries e.g. UI Pattern Library by GVSU
polyfills and other helper libraries e.g. picturefill
APIs e.g. SFU Library API
testing frameworks or set of evaluation tools e.g. QuailJS
good documentation e.g. Phabricator

Some “Special” Considerations

Keyboard Accessibility

Skip Links


<body>
<a class="hide-text" href="#main">Skip to Main Content</a>

<nav role="navigation">
	// Menu
</nav>

<div id="main" role="main">
	 // Content
</div>

</body>

Schofield, M. (2014). ARIA for the Spec Impaired. http://ns4lib.com/aria-primer/

ARIA

Accessible Rich Internet Applications Suite


<nav role="navigation">
	// Menu
</nav>

Reference:

Media

Images: alt=""
Audio: transcript
Video: transcript
Video: captions
Video: descriptive audio

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

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/

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/

Death to the Carousel

Inspired by shouldiuseacarousel.com

Testing and Assessment

Frameworks

QuailJS

Evaluation Tools

HTML Codesniffer (bookmarklet)
WCAG Contrast Checker (Firefox plugin)
WAVE Toolbar
For more, W3C Web Accessibility Tools list

Simulation Tools

To assess your tool or service, you can use automated methods or tools. You might use a framework, such as QuailJS. Other options include evaluation tools.

Evaluation tools allow you to check conformance to guidelines. For example,

HTML Codesniffer (bookmarklet) - check against WCAG, including when logged in
WCAG Contrast Checker (Firefox plugin)
WAVE Toolbar - view as text-only, outline only, etc.
For more, check the W3C Web Accessibility Tools list

There are also simulation tools allow you to simulate certain conditions or environments. For example, VisCheck takes images and simulates colour blindness. (Vischeck also provides a tool called Daltonize, which attempts to correct images.). There are also some screen reader emulators, such as Fangs, which I showed you briefly earlier.

Analytics

HD Wallpapers 3D.com. (n.d.) Heat Map HD Wallpaper 3. http://www.hdwallpapers-3d.com/heat-map/heat-map-hd-wallpaper-3/. Believed to be in public domain.

User Testing

5 second test
Lab Task Test
Guerilla Testing
Paid Testing (e.g. VIRN)

However, numbers and tests is not an indication that your website is actually accessible or usable. Nothing can replace actual user and usability testing throughout development.

This is where usability testing comes in, which can be as simple or complex as you make it.

Simple ones include a “5 second test” where for example, you ask a user where they might click on a home page given a specific task. I also want to reiterate that testing and assessment should not all be done at the end, but throughout the process. The “5 second test” I’ve described is a great test to do while you’re still at the design stage.

More complex usability testing might involved scheduling specific individuals to answer questions and complete tasks in a lab setting where audio and video are recorded in a longer session.

Nevertheless, user testing can also be something in between. Guerilla testing is very popular whereby a laptop is setup with screen, video, and audio recording in a small area of a high traffic area, asking users who pass by to sit down for 10-15 minutes.

If you have some money, but not the time and in-house resources, there are lots of companies that will run usability tests for you.

If you want to specifically have disabled users test your service, I encourage you to collaborate with another department or team. If that’s not possible, Canadian organizations, such as the Vision Impaired Resource Network (VIRN), will do accessibility assessments on websites for a fee.

Training and Documentation

Guidelines for Content Creators

Be clear and concise
Use headers and tables properly
Use descriptive links
Describe images if needed
Make and choose videos with captions, and add a link if you embed them

With the rise of the CMS, fewer organizations have a single person writing content for the website. When staff in an organization are restricted within their roles on a CMS, there is no reason that staff members should not be empowered to write and edit the content for the areas they are responsible for, and fix minor errors in other areas.

While you cannot control what other people write, you can encourage best practices by providing a few simple guidelines. By giving staff examples and resources, you can build content best practices into the writing process.

Be clear and concise - because users don’t want to read whole paragraphs to get the answer they want
Use headers and tables properly - I tell them to use headers like they would in a report, and tables should only be for displaying data (not for layout purposes)
Use descriptive links - pretending the only context a user has is what page they’re on
Describe images if needed (GO DOWN) e.g. alt text decision flow chart
Last but not least, Make and choose videos with captions, and add a link if you embed them

Emphasize that the guidelines are for everyone’s benefit, and that the accessibility and usability of content is a shared responsibility.

Alexander, Dey. (2014). Text alternatives for images: a decision tree.

Accessibility Statement

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

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/

Resources

Examples

Take Away

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

Thanks!

Contact

Cynthia Ng
@TheRealArty
about.me/cynthiang