Presentation from February 2016 to a George Brown College UX design class by Linnea Vizard and Adie Margineanu on designing for digital accessibility.

1. Digital Accessibility
Linnea Vizard
Adie Margineanu

2. Why focus on digital accessibility?
• Accessibility helps everyone
• Accessibility has huge financial benefits
• Accessibility is the law

3. Outline
Understanding disability and accessible design
Benefits of accessible design
Web Content Accessibility Guidelines (WCAG)
Applying WCAG
Testing accessibility
Q&A

4. 4
Disability is
a mismatch between the needs of the individual and
the design of the product, system, or service
experienced by anyone excluded from the design
- Inclusive Design Research Centre, OCAD

5. https://www.youtube.com/watch?v=x31u1seLTo0&feature=youtu.be

6. Digital experiences might be excluding or
creating barriers for people with the following
types of impairments:
6
Visual impairments Auditory impairments
Mobility impairments Cognitive impairments

7. Assistive Technology and Tools
7
• Screen readers (JAWS, NVDA,
VoiceOver, TalkBack)
Image credit: http://westernblind.blogspot.ca/
2011/06/cat-skills-zoomtext.html
• Screen magnification (ZoomText,
through the browser)
• Speech recognition (Dragon
NaturallySpeaking)
• Eye-tracking, sip and puff control,
dynamic braille display, alternative
keyboard, oversized trackball
mouse, etc.

8. 8
Accessibility is
the degree to which a system or service is available to
as many people as possible
the “ability to access” a system

9. Accessible design
approaches

10. 10
Universal design is
a one size fits all approach
originated in architecture and industrial design
- Inclusive Design Research Centre, OCAD

12. 12
Inclusive design is
a one size fits one approach
suitable for digital systems because of the freedom to
create a flexible design that can adapt, morph, or
stretch to address a wider range of needs
- Inclusive Design Research Centre, OCAD

14. Accessibility
helps everyone.

15. Accessibility is for everyone
Curb cuts
Image from: https://asyourworldchanges.wordpress.com/2008/10/06/using-the-curb-cuts-principle-to-reboot-computing/

16. • Curb cuts
• Closed captioning
• Automatic doors
• Accessible washrooms
Accessibility is for everyone
Closed captioning
https://en.wikipedia.org/wiki/Subtitle_(captioning)

17. • Curb cuts
• Closed captioning
• Automatic doors
• Accessible washrooms
Accessibility is for everyone
Sliding entry doors
http://www.archiexpo.com/prod/kaba-saflok/product-59355-1226003.html

18. Accessibility has
financial benefits.

19. 15.5% $25B $100K
of the gen pop lives
with a disability.
combined
spending power
across Canada.
daily financial
penalties of legislative
non-compliance.
Financial Benefits

20. Accessibility
is the law.

21. United States
21
• Americans with Disabilities Act (ADA)
• Section 508
Canada
• Federal Accessibility Legislation
• Ontario: Accessibility for Ontarians with Disabilities Act (AODA)
• Province-specific: Manitoba, Nova Scotia, Saskatchewan, BC,
Newfoundland

22. Web Content Accessibility
Guidelines 2.0

23. Web Content Accessibility Guidelines (WCAG,
“wuh-cag”) are a set of standards developed by the
World Wide Web Consortium to ensure websites
and digital experiences are accessible.
23
• Most digital accessibility legislation, including
AODA adheres to WCAG 2.0
• WCAG 2.0 Level A and AA.

24. Web Content Accessibility Principles
24
Perceivable
“Provide text alternative for any non-text content,
so that it can be changed into other forms people
need, such as large print, braille, speech, symbols
or simpler language.”
Operable “Make all functionality available from a keyboard.”
Understandable “Make text content readable and understandable.”
Robust
“Maximize compatibility with current and future
user agents, including assistive technologies.”
-WCAG 2.0 Guidelines
https://www.w3.org/WAI/WCAG20/quickref/#qr-text-equiv-all

25. 1. Perceivable
1.1: Provide text alternatives for any non-text content so that it can be
changed into other forms people need, such as large print, braille, speech,
symbols or simpler language.
1.2: Time-based media: Provide alternatives for time-based media.
1.3: Create content that can be presented in different ways (for example
simpler layout) without losing information or structure.
1.4: Make it easier for users to see and hear content including separating
foreground from background.
2.1: Make all functionality available from a keyboard.
2.2: Provide users enough time to read and use content.
2.3: Do not design content in a way that is known to cause seizures.
2.4: Provide ways to help users navigate, find content, and determine
where they are.
2. Operable

26. 3. Understandable
4. Robust
3.1: Make text content readable and understandable.
3.2: Make web pages appear and operate in predictable ways.
3.3: Help users avoid and correct mistakes.
4.1: Maximize compatibility with current and future user
agents, including assistive technologies.

27. Level AAA “Provide sign language translations for videos.”
Level A “Provide text alternatives for non-text content.”
Level AA “Users have access to audio description for video
content.”

28. Visuals
• Provide alternative text

29. Visuals
• Use adequate color contrast

30. Visuals
• Use logical/hierarchical organization and descriptive,
succinct page titles

31. Language
• Use clear sentences
• Provide definitions for unfamiliar concepts

32. Compatibility
• Website accessibility should account for different assistive
devices and tools used
• Content should be compatible with older browsers and legacy
versions of tools or software
• Websites should be fully navigable by keyboard

33. Compatibility
• Website accessibility should account for different assistive
devices and tools used
• Content should be compatible with older browsers and legacy
versions of tools or software
• Websites should be fully navigable by keyboard

34. Making sure the product is accessible
34
• Need to make sure what we design and build works for people
with impairments and people using assistive technology
• The way we do that is through testing:
- automated testing
- manual testing
- testing with users

35. Testing with users
• Usability vs accessibility testing?
• Remote vs in person
• Recruiting
• Technology versioning

36. Personal set up
• Set up is calibrated in specific
ways
36
Image credit: http://www.cccblog.org/2014/05/16/vis
ions2025-interactions/
• Recording can be a challenge
• Important to note the specifics of
the user’s set ups and settings
• Speed of the screen reader

37. What does a screen reader sound like?
37
iOS VoiceOver at about 500 words per minute
Advanced screen reader user’s can get up to
900-1200 words per minute

38. Auditing digital products for
accessibility
• Colour contrast and visual design check
• Keyboard check
• Screen reader check
• Manual and automated code check

39. http://webaim.org/resources/contrastchecker/
Colour Contrast Checker
• Enter the background and foreground colours
• See if contrast passes or fails desired preference
• Tip: lighten or darken colours within the interface
• Colour contrast ratio for level AA should be at least 4.5:1 for
normal text and 3:1 for large text
39
Colour Contrast Analyser app
http://www.paciellogroup.com/resources/contrastanalyser/

40. Sim Daltonism
• Colour blindness simulator app for Mac OS X
40
Available on the App Store (free)
https://michelf.ca/projects/sim-daltonism/

41. Photoshop tools
• View > Proof Setup > Colour Blindness
41
Integrated colour blindness checkers

42. Greyscale
• View your design in greyscale
42

43. Keyboard check

44. Screen reader check

45. https://addons.mozilla.org/en-us/firefox/addon/fangs-screen-
reader-emulator/
Fangs Screen Reader Emulator
• Free for Firefox browser
• Screen reader output, list of headings, list of links
45

46. https://addons.mozilla.org/en-us/firefox/addon/web-developer/
Web Developer extension
• Free for Firefox browser
• Disable images, linearize the page, find duplicate ID’s, display
ARIA roles, view heading structure, display image alt tags, etc.
46

47. HTML CodeSniffer
• Browser extension
• Cut and paste code
• Results need appropriate
interpretation
• For example: image alt tags
47
http://squizlabs.github.io/HTML_CodeSniffer/

48. AODA compliance timelines
48
Jan 2014
Jan 2015
Jan 2016
Jan 2021
New internet + web
content compliant
with WCAG 2.0 A.
Notify public about
availability of accessible
formats and communications.
Provide accessible
formats and
communication support.
All internet and web
content compliant
with WCAG 2.0 AA.

49. Resources
Legislation in United States and Canada
http://www.usabilitymatters.com/2015/wp-content/uploads/
2016/01/BMO_resources_v2.pdf
Infographic: Why is accessibility important?
http://www.usabilitymatters.com/why-is-accessibility-important/

50. Usability Matters
215 Spadina Ave, Toronto
www.usabilitymatters.com
info@usabilitymatters.com
Thank you
facebook.com/UsabilityMattersInc
@umatters
linkedin.com/company/usability-matters
Linnea Vizard
416 598 7770 ex 19
linnea@usabilitymatters.com
Adie Margineanu
416 598 7770 ex 25
adie@usabilitymatters.com