Presented at Penn State's 2014 Web Conference: The Future Friendly Web An introduction to web accessibility. Discusses what it is, & who is affected as well as tools and techniques for addressing accessibility issues

1. BEAT THE
TSUNAMI
WITH A WAVE
@PatrickDunphy

2. Who am I?

3. I work here I co-lead here

4. I live here

5. The Real
Beginning
The
Beginning
My AccessibilityJourney
The
Present

6. Some Things
You don’t expect to learn

7. Not Taught
Education & Awareness Necessary

8. Change Necessary
Everyone is Responsible

13. Accessibility
It’s Good For You

14. Technology
Constant Change

18. Accessibility...

19. Core Concept
of Accessibility

20. It’s About People
Always think about users needs

21. DIFFERENT USERS DIFFERENTNEEDS
• Limited Mobility
• Cognitive Challenges
• Colour Blind
• Seizure Disorders
• Deaf / Hearing Impaired
• Visually Impaired
• Total Blindness
• Voice Interaction
• Clear Defined Goals
• Colour Contrast
• Clean Animation
• Closed Captions
• Screen Magnification
• Screen Readers

23. Accessibility Standards

24. The Wrong Question
Not about if, it’s about when

25. The Silver Tsunami
• Fastest growing user group
• 19% of USA by 2030
• 4x likely to have disability
• Experience = Expectations

27. Today’s Goal
Introduce free tools that are easy to
use and can be leveraged today.

28. AGENDA
1. Identify Issues
2. Discover Test Tools
3. Sample Test Plan
4. Testing Techniques

29. 1. Accessibility Issues

30. General Issues
• Keyboard support
• Sensory cues
• Consistent navigation
• No Context
• Dynamic content
• Controlling the UX

31. Image Problems
• Misuse of alt text
• Missing alt attributes
• Charts and graphs
• CSS images
• Title attributes
• Pictures of text

32. Content Issues
• Poor structure
• Inappropriate markup
• Source order
• Absolute font sizes
• Poor contrast
• Inappropriate link text
• Language undefined

33. 2. Testing Tools

34. • Tools *assist* with evaluation
• Identify *Potential* issues
• Will not verify 100% accessible

35. Sample Accessibility
Testing Toolkit
• WAVE
• FireEyes
• Web Developer Toolbar
• Functional Accessibility
Evaluator
• Juicy Studio Plugin
• Firebug / Code Inspector
• Fangs
• Web Accessibility
Toolbar (IE)
• Colour Contrast Analyzer
• Aviewer

36. My Personal Favourite - WAVE
Wave Features:
• Results Summary
• CSS Toggle
• Contrast Summary
• Document Outline
• Target / Documentation
• Code Inspector

38. USA Today.com | 34 Errors

39. ESPN.com | 36 Errors

40. NY Times.com | 61 Errors

41. CNN.com | 69 Errors

42. WEB Version toolbarApi

43. • Tools catch < 30% errors
• Keyboard Functionality
• High Contrast Mode
• Form Labels / Errors
• Code Inspection
Accessibility Requires
Manual Testing

44. 3. Sample Test Plan

45. 10 Step Test Plan
1. Compile UI
2. Sanity Test
3. Validate Code
4. Apply Tools
5. Test Subjectivity
6. Use Keyboard
7. Use Screenreader
8. Verify Target
9. User Testing
10. Rinse & Repeat

46. Compile UI
1. Modules, containers,
templates, pages
2. Prioritize frequency &
prominence
3. Include typically challenging
elements for PWD’s

47. Sanity Test
No CSS & No Images
Does it still make
sense?

48. Validate Code
Validate HTML & CSS
Catches errors bad for
Assistive Technology

49. Apply Tools
At least 2
Compare results
Eliminate false positives

50. Test Subjectivity
Judgement calls
Improve w/Experience

51. Use Keyboard
Most Important Test!
Gateway to Accessibility
Hardware & Software

52. Keyboard test everything!
Links & Buttons are only way to interact with a page*
* by default

53. Use Screenreader
... R E A D E R

54. Use Screenreader
• IE 8+ and latest JAWS
• Firefox and NVDA
• Chrome & ChromeVox
• VoiceOver and iOS/OSX
• Talkback on Android

55. Verify Target
Measure against
predefined standard
i.e. WCAG 2.0 AA

56. User Testing
Involve Real People with Real
Disabilities
PWD using AT will reveal
undiscovered issues
Include seniors

57. Rinse & Repeat
All Additions & Updates
Avoid Accessiblity Atrophy

58. 4. Testing Techniques

59. 1. Keyboard
2. Headings
3. Images
4. Links
5. Forms
6. Colour
7. CSS
8. JavaScript
9. Multimedia
Testable Items

60. KEYBOARD

61. Possible Tools:
1. Keyboard
2. Keyboard
3. Keyboard
Keyboard Issues:
• Logical Order
• Focus Indicators
• Consistent Behaviour
• Bypass Blocks
The Pointerless Web
http://weba.im/pointerlessweb

62. HEADINGS

63. Possible Tools:
• FAE (functional accessibility evaluator)
• Juicy Studio
• WAVE
• FANGS
Heading Issues:
• Site Structure
• Visual Indication
• Follow Hierarchy
• Used by AT
The HTML5 Document Outline
http://weba.im/headerfiction

64. IMAGES

65. Possible Tools:
• WAVE
• High Contrast Mode
• Web Dev Toolbar
• Favlets
Image Issues:
• Alt Attributes
• Context + Function
• Make sense w/o
• Images of Text
Text Alternative Decision Tree
http://weba.im/alternativetree

66. LINKS

67. Possible Tools:
• FAE (functional accessibility evaluator)
• Fangs
• Juicy Studio
Link Issues:
• Improper Markup
• Ambiguous Link Text
• Consistency
• Cognitive Load
Links & Hypertext
http://weba.im/linktext

68. FORMS

69. Possible Tools :
• Keyboard
• Web Dev Toolbar
• Wave
Form Issues :
• Required Fields
• Logical Order
• Grouped Items
• Label : Input
• User Feedback
Improving the Accessibility of Forms
http://weba.im/canadaforms

70. COLOUR

71. Possible Tools :
1. Colour Contrast
Analyser
2. Juicy Studio
3. WAVE
Colour Issues :
• Insufficient Contrast
• Sole means of info
• Gradients
• Images / background
Colour Accessibility
http://weba.im/24color

72. CSS

73. Possible Tools :
• Web Dev Toolbar
• WAVE
• WAT (IE)
CSS Issues :
• Logical Order
• Focus Indicators
• CSS Content
• Sprites
The Content CSS Property and Accessibility
http://weba.im/styleoversubstance

74. JavaScript

75. Possible Tools :
• WAVE Toolbar
• FireEyes
• Manual Inspection
JavaScript Issues :
• Dynamic Content
• Inappropriate Use
• Modals / Menus
• Controlling the user
Accessible JavaScript
http://webaim.org/techniques/javascript/

76. Multimedia

77. Tools to use:
• Keyboard
• Speakers
• Visuals
Multimedia Issues :
• Autoplay
• Captioning
• Transcripts
• Keyboard Access
BBC Multimedia Standards
http://weba.im/bbcmedia

78. Vast Majority of Issues
Keyboard or Visual Focus

79. Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge

80. Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge

81. Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions (#a11y is your friend)
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge

82. Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge

83. Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge

84. Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt)
• Be a SPONGE
• SHARE your knowledge

86. THANK YOU!
@PatrickDunphy
http://weba.im/psuweb14a11ytest

87. http://www.fundingexchange.org/news/0s-and-1s-the-tsunami-wave-of-change/
http://webconference.psu.edu/
http://sites.psu.edu/willamesbury/2013/09/13/beaver-stadium/
http://www.yourleaf.org/blog/samantha-oneill/2013-04-22/dirty-hands-clean-planet
http://www.articlesweb.org/culture/neapolitan-ice-cream-origin-and-recipe-sources
http://agilemarketing.com.au/website-accessibility-and-usability-the-basics/
http://www.lifeplus.com/us-en/product-category/vitamins-minerals
http://chrisqueen.net/2011/04/19/from-newsreal-blog-bad-medicine/
http://www.thatcutesite.com/kitten-doing-morning-exercises.html
http://sciencefiction`.com/2013/12/31/bens-top-5-sciencefiction-com-movies-2013/
http://motorburn.com/2014/03/icar-apple-makes-biggest-in-vehicle-play-yet-with-carplay/
http://mackaycartoons.net/2013/08/20/tuesday-august-20-2013/
http://www.archdaily.com/364518/the-architect-and-the-accessible-city-the-prize-winning-essay/
http://www.relacoesinstitucionais.gov.br/
http://magrabi.org/causes/magazine-for-the-blind/
http://cheezburger.com/6788853248
http://clickheretech.davegreenbaum.com/
http://www.you-are-the-movement.com/?p=84
http://hdfons.com/elmer-fudd/
http://www.thatsyogarbage.com/metal-gear-rising-revengarbage/care-bears-caring-and-sharing-sm/
http://www.picgifs.com/clip-art/spongebob/
http://blog.kevineikenberry.com/influence/intention/improve-your-tomorrows-by-asking-one-question-today/
Photo Credits