Accessibility is About Your Users

Cynthia Ng
October 9, 2015


red panda sleeping De Clerck, Stefaan. (2015). Sleeping beauty. CC BY-NC-SA 3.0

70 slides in 20 minutes

= 3.5 / minute


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.
The three monkeys: See No Evil, Hear No Evil, Speak No Evil Snape, John. (2011). See No Evil, Hear No Evil, Speak No Evil.,_Hear_No_Evil,_Speak_No_Evil.jpg CC BY-SA 3.0

Types of Disabilities

  • visual
  • auditory
  • physical/motor
  • touch
  • learning

or Why Should You Care?

icon of 10 people, one of which is coloured in Statistics Canada. 2013. Statistics Canada on Twitter. Approximate number based on: World Bank. 2012. Population ages 15-64 (% of total).
icon of 10 people, one and a half of which is coloured in Brault, Matthew W. (2012). Americans With Disabilities: 2010 Household Economic Studies.

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

Getting Buy-in


  • 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).

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.
ape holding a large leaf over its head Anonymous. (2013). Untitled. As permitted by TOS

Considering Assistive Technology

  • screen readers
  • text-to-speech
  • screen magnifiers
  • joysticks
ape holding a large leaf over its head From: Gibson, Anne. (2015). Reframing Accessibility for the Web. With permission from author
budgie standing on keyboard Fitzgerald, Michael. (2008). Computer Budgie II. CC BY-NC-SA 2.0
cat lying on iPad 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

example wheelchair ramp marziarh. (2012). Robson Square. 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
table with over 30 android devices animoca. (2012). All the Myriad Androids. CC-BY-ND 3.0
a crowd of people Habib, Fady. (2005). Unity in Diversity. CC BY-NC-SA 3.0
bridge over a gorge Trott, Nic. (2012). Clifton Suspension Bridge. CC BY 2.0


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

Mobile First

Mobile forces you to focus.

- Luke Wroblewski @lukew

Wroblewski, L. (2009). Mobile First.

Responsive Design

website at three different sizes



"Special" Considerations

Colour Contrast

Keyboard Accessibility

search field with outline



Form Elements and Accessibility

Skip Links


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

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.


in Word, go to Info, check for issues, check accessibility in PowerPoint, go to Info, check for issues, check accessibility WebAIM. (2014). Microsoft Word.
© WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use.
WebAIM. (2014). PowerPoint Accessibility.
© WebAIM. Used under full credit, at no cost allowance as per the WebAIM Copyright & Terms of Use.

Testing and Assessment

Evaluation Tools

Simulation Tools

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

  1. Use headers properly
  2. Use descriptive links
  3. Use tables for data, not layout
  4. Describe images if needed
  5. If you embed audio/video, add a link to it too
alt text decision flow chart Alexander, Dey. (2014). Text alternatives for images: a decision tree.

Other Guideline Examples and Resources

More Resources

General Resources

Even More Resources

Lists of Accessibility Resources:

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

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



nodoka holding a stack of books