Accessibility is About Your Users

Cynthia Ng
@TheRealArty
October 9, 2015

Introduction

So, a quick introduction. My name is Cynthia Ng. I currently work as the Content Coordinator for the National Network for Equitable Library Service (or the NNELS project) at the BC Libraries Cooperative, a non-profit organization that provides centralized services for libraries, primarily in BC, but actually, across Canada. If you’re in a class that gets training or talks about Evergreen, then you’ve probably met some of my coworkers. While my main focus in my current position is getting books in accessible formats added to our collection for print disabled readers, I’ve also been working on websites and making them accessible, usable, and responsive for a few years.

If you want to know more about what I do either in or outside of libraries, then you can read about me on my about.me page (which is just about.me/cynthiang) or if you really want to read _all_ about me, you can go to my blog, where I have a full about me page.

I _have_ spoken at a number of conferences and done some webinars on accessibility (so I hope I’m not boring anyone who’s managed to see or read one of my previous presentations), and what I’m known for, when presenting, is...

De Clerck, Stefaan. (2015). Sleeping beauty. https://500px.com/photo/121896277/sleeping-beauty-by-stefaan-de-clerck CC BY-NC-SA 3.0

70 slides in 20 minutes

= 3.5 / minute

Definition

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

The three monkeys: See No Evil, Hear No Evil, Speak No Evil

Snape, John. (2011). See No Evil, Hear No Evil, Speak No Evil. https://commons.wikimedia.org/wiki/File:See_No_Evil,_Hear_No_Evil,_Speak_No_Evil.jpg CC BY-SA 3.0

Types of Disabilities

visual
auditory
physical/motor
touch
learning

Numbers
or 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.

icon of 10 people, one and a half of which is coloured in

Brault, Matthew W. (2012). Americans With Disabilities: 2010 Household Economic Studies. http://www.census.gov/prod/2012pubs/p70-131.pdf

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. * Based on 2010 US census percentage of total population with a disability, and the percentage of total population of minorities.

Policy & Legislation

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

USA: Americans with Disabilities Act; Federal Departments: Rehabilitation Act: Section 508

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

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

screenshot of U.S. Department of the Interior website homepage

Source: Sutton, Marcy. (2015). US Department of the Interior. Showcasing Accessible Websites

Designing for Assistive Technology

Defining 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.
- Wikipedia

Multiple authors. (2015). Assistive Technology. Wikipedia.

Anonymous. (2013). Untitled. As permitted by TOS

Considering Assistive Technology

screen readers
text-to-speech
screen magnifiers
joysticks

From: Gibson, Anne. (2015). Reframing Accessibility for the Web. With permission from author

Fitzgerald, Michael. (2008). Computer Budgie II. CC BY-NC-SA 2.0

Fuster, Anna. (2011). perimer l'un hi dezcansa a sobre... CC BY-NC-ND 2.0

All Technology is Assistive Technology.
- Sara Hendren @ablerism

Hendron, S. (2013). All Technology is Assistive Technology: 6 dispositions for designers on disability.

We need to change the way we talk about accessibility. … We can reframe accessibility in terms of what we provide, not what other people lack.
- Anne Gibson @kirabug

Gibson, Anne. (2015). Reframing Accessibility for the Web.

Universal Design

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

Universal Design for the Web

Universal Web Design Principles in Short

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

Quesenbery, W. (2014). A Web for Everyone: Accessibility as a Design Challenge. O'Reilly.

Universal Design in Practice

Major Challenges

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

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

Habib, Fady. (2005). Unity in Diversity. CC BY-NC-SA 3.0

Trott, Nic. (2012). Clifton Suspension Bridge. CC BY 2.0

Approaches

Minimal Load Time

average website = 2.2 MB = 6 sec

HTTP Archive. (2015). Average Bytes per Page by Content Type. Keynote. (2015). Performance Index: Mobile Commerce (Retail) – US.

[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

Two seconds may not seem like a long time, but consider that users can spot—and are bothered by—performance delays as short as 300 milliseconds.
- Scott Jehl @scottjehl

Jehl, Scott. (2014). Planning for Performance.

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

Mobile First

Mobile forces you to focus.
- Luke Wroblewski @lukew

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

Responsive Design

Demo

Resources:

"Special" Considerations

Colour Contrast

Keyboard Accessibility

Demo

Forms

Form Elements and Accessibility

Skip Links

Media

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

Anytime you have some kind of media, whether that be images, audio, or video, you should have a text-based alternative.

With images, you would use alternative text or “alt text”. When the image is purely decorative, or the message is already in text format, you don’t actually need it. There are lots of articles, and flow charts that will help you determine when you need it and when you don’t.

With audio and video, you will want to have captions, or a transcript. You also want to make sure that your audio and video do not automatically play.

Let’s do another exercise: can someone tell me which website they have open? The one you were using for the other exercises? [pull up site] Does anyone notice anything wrong? Does anything autoplay on this site? [carousel] That’s right.

Usually called carousels or image sliders, they are rampant on websites.

Top 10 Academic Library Websites

6 / 10 have carousel

5 / 6 autoplay

Singley, E. (2014). Top 10 Academic Library Websites.

Top 10 of 20 Great Public Library Websites

9 / 10 have carousel

9 / 9 autoplay

Anderson, M. (2013). 20 Great Public Library Websites. http://www.mattanderson.org/blog/2013/02/11/20-great-public-library-websites/

Documents

in Word, go to Info, check for issues, check accessibility

in PowerPoint, go to Info, check for issues, check accessibility

WebAIM. (2014). Microsoft Word. http://webaim.org/techniques/word/
© WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use. WebAIM. (2014). PowerPoint Accessibility. http://webaim.org/techniques/powerpoint/
© WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use.

Testing and Assessment

Evaluation Tools

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

Simulation Tools

At the very basic of website testing is making sure it works across browsers and platforms. More specific to accessibility, you can use automated methods or 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,

Fangs - a Firefox plugin, which emulates a screen reader by providing what would be read in text form
Vischeck - which processes images to simulate colour blindness. (Vischeck also provides a tool called Daltonize, which attempts to correct images.)
Go ahead, go to colorfilter address and try a website. If there are lots of images, it might take a little bit of time and the layout may not look exactly the same, but this should give you an idea of what it’s like.

Developer toolbars, semantic markup and automated testing tools can only get you about 30% of the way towards Web Accessibility goals.
- Denis Boudreau @dboudreau & Matt Feldman @hlpsom1

Boudreau, Denis & Feldman, Matt. (2015). Slide 13 of Integrating Accessibility into the Project Lifecycle - Lessons Learned.

Ask Your Users

Training and Documentation

We need to make simple, readable, effective content.
- Anne Gibson @kirabug

Gibson, Anne. (2014). An Alphabet of Accessibility Issues.

Guidelines for Content Creators

Use headers properly
Use descriptive links
Use tables for data, not layout
Describe images if needed
If you embed audio/video, add a link to it too

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

Other Guideline Examples and Resources

More Resources

General Resources

WCAG Quick Reference
The Paciello Group Blog - a lot of great articles on focused on accessibility and HTML/CSS
The Accessibility Project - lots of quick tips
Canadian Guidelines on Library and Information Services for People with Disabilities (out of date, currently being revised) by CLA
Accessibility Information Toolkit for Libraries by OCUL

Even More Resources

Lists of Accessibility Resources:

Accessible Technology: Tools & resources by the University of Washington
Tools and Resources for Accessible Web Design by Texas School for the Blind and Visually Impaired out of date but still a number of useful resources
Code4LibBC Accessibility Breakout Group Notes

Take Away

Websites are software that help people accomplish their goals, regardless of the hardware and software combination, regardless of the shapes and forms of their people. That is accessibility.
- Anne Gibson @kirabug