BEAT THE
TSUNAMI
WITH A WAVE
@PatrickDunphy
Who am I?
I work here I co-lead here
I live here
The Real
Beginning
The
Beginning
My AccessibilityJourney
The
Present
Some Things
You don’t expect to learn
Not Taught
Education & Awareness Necessary
Change Necessary
Everyone is Responsible
Accessibility
It’s Good For You
Technology
Constant Change
Accessibility...
Core Concept
of Accessibility
It’s About People
Always think about users needs
DIFFERENT USERS DIFFERENTNEEDS
• Limited Mobility
• Cognitive Challenges
• Colour Blind
• Seizure Disorders
• Deaf / Heari...
Accessibility Standards
The Wrong Question
Not about if, it’s about when
The Silver Tsunami
• Fastest growing user group
• 19% of USA by 2030
• 4x likely to have disability
• Experience = Expecta...
Today’s Goal
Introduce free tools that are easy to
use and can be leveraged today.
AGENDA
1. Identify Issues
2. Discover Test Tools
3. Sample Test Plan
4. Testing Techniques
1. Accessibility Issues
General Issues
• Keyboard support
• Sensory cues
• Consistent navigation
• No Context
• Dynamic content
• Controlling the ...
Image Problems
• Misuse of alt text
• Missing alt attributes
• Charts and graphs
• CSS images
• Title attributes
• Picture...
Content Issues
• Poor structure
• Inappropriate markup
• Source order
• Absolute font sizes
• Poor contrast
• Inappropriat...
2. Testing Tools
• Tools *assist* with evaluation
• Identify *Potential* issues
• Will not verify 100% accessible
Sample Accessibility
Testing Toolkit
• WAVE
• FireEyes
• Web Developer Toolbar
• Functional Accessibility
Evaluator
• Juic...
My Personal Favourite - WAVE
Wave Features:
• Results Summary
• CSS Toggle
• Contrast Summary
• Document Outline
• Target ...
USA Today.com | 34 Errors
ESPN.com | 36 Errors
NY Times.com | 61 Errors
CNN.com | 69 Errors
WEB Version toolbarApi
• Tools catch < 30% errors
• Keyboard Functionality
• High Contrast Mode
• Form Labels / Errors
• Code Inspection
Accessib...
3. Sample Test Plan
10 Step Test Plan
1. Compile UI
2. Sanity Test
3. Validate Code
4. Apply Tools
5. Test Subjectivity
6. Use Keyboard
7. Use...
Compile UI
1. Modules, containers,
templates, pages
2. Prioritize frequency &
prominence
3. Include typically challenging
...
Sanity Test
No CSS & No Images
Does it still make
sense?
Validate Code
Validate HTML & CSS
Catches errors bad for
Assistive Technology
Apply Tools
At least 2
Compare results
Eliminate false positives
Test Subjectivity
Judgement calls
Improve w/Experience
Use Keyboard
Most Important Test!
Gateway to Accessibility
Hardware & Software
Keyboard test everything!
Links & Buttons are only way to interact with a page*
* by default
Use Screenreader
... R E A D E R
Use Screenreader
• IE 8+ and latest JAWS
• Firefox and NVDA
• Chrome & ChromeVox
• VoiceOver and iOS/OSX
• Talkback on And...
Verify Target
Measure against
predefined standard
i.e. WCAG 2.0 AA
User Testing
Involve Real People with Real
Disabilities
PWD using AT will reveal
undiscovered issues
Include seniors
Rinse & Repeat
All Additions & Updates
Avoid Accessiblity Atrophy
4. Testing Techniques
1. Keyboard
2. Headings
3. Images
4. Links
5. Forms
6. Colour
7. CSS
8. JavaScript
9. Multimedia
Testable Items
KEYBOARD
Possible Tools:
1. Keyboard
2. Keyboard
3. Keyboard
Keyboard Issues:
• Logical Order
• Focus Indicators
• Consistent Behav...
HEADINGS
Possible Tools:
• FAE (functional accessibility evaluator)
• Juicy Studio
• WAVE
• FANGS
Heading Issues:
• Site Structure
...
IMAGES
Possible Tools:
• WAVE
• High Contrast Mode
• Web Dev Toolbar
• Favlets
Image Issues:
• Alt Attributes
• Context + Functio...
LINKS
Possible Tools:
• FAE (functional accessibility evaluator)
• Fangs
• Juicy Studio
Link Issues:
• Improper Markup
• Ambiguo...
FORMS
Possible Tools :
• Keyboard
• Web Dev Toolbar
• Wave
Form Issues :
• Required Fields
• Logical Order
• Grouped Items
• Lab...
COLOUR
Possible Tools :
1. Colour Contrast
Analyser
2. Juicy Studio
3. WAVE
Colour Issues :
• Insufficient Contrast
• Sole means ...
CSS
Possible Tools :
• Web Dev Toolbar
• WAVE
• WAT (IE)
CSS Issues :
• Logical Order
• Focus Indicators
• CSS Content
• Sprit...
JavaScript
Possible Tools :
• WAVE Toolbar
• FireEyes
• Manual Inspection
JavaScript Issues :
• Dynamic Content
• Inappropriate Use
•...
Multimedia
Tools to use:
• Keyboard
• Speakers
• Visuals
Multimedia Issues :
• Autoplay
• Captioning
• Transcripts
• Keyboard Access
...
Vast Majority of Issues
Keyboard or Visual Focus
Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt...
Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt...
Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions (#a11y is your friend)
• Avoid FUD (f...
Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt...
Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt...
Final Words
• YOU are the best test tool
• Offer PRAGMATIC solutions
• ASK Questions
• Avoid FUD (fear, uncertainty, doubt...
THANK YOU!
@PatrickDunphy
http://weba.im/psuweb14a11ytest
http://www.fundingexchange.org/news/0s-and-1s-the-tsunami-wave-of-change/
http://webconference.psu.edu/
http://sites.psu.e...
Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb
Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb
Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb
Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb
Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb
Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb
Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb
Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb
Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb
Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb
Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb
Upcoming SlideShare
Loading in …5
×

Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb

1,385 views

Published on

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

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,385
On SlideShare
0
From Embeds
0
Number of Embeds
64
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Reinforced reason for learning series
  • Many areas, disciplines, distributed contributors
  • More colloaborate, work closer together
  • Accessibility is eating healthy
  • Avoid sickness ; take medicine
  • Fitness = health
  • Fitness = health
  • Youtube kids & tech
    Tech improves accessibility
  • Illustrates the complexity & simplicity of accessibility
    Accessibility leads to innovation
  • Users come first. Always & without exception.
  • Software & hardware
  • 1. Holographic keyboard
    2. Low vision / keyboard guard template
    3. Orbitouch – keyless keyboard / mouse combo
    4. One handed keyboards
    5. Foot pedals / braille display
    6. Button switches
    7. Reflector / blink
    8. High contrast mode
    9. Head wand
  • No longer an option of it it will apply to me, it’s when will it apply to me.
    Accessibility for Ontarians with Disabilities Act
    Web Content Accessibility Guidelines – version 1 1999, version 2 2008 – now ISO standard
    British Standards
    The 21st Century Communications and Video Accessibility Act of 2010 
  • Don’t make assumptions. Who is visiting your site? How?
    Car site user..
    Not if. But when..
    Age related disabilities.
  • 19% of US Population by 2030
    4 X likely to suffer from disability than working age person
    Digital Experience = Increased Expectations
  • POSH / KISS
  • Every active element receives keyboard focus.
    Focus indicator is visible and is not partially hidden.
    All active elements can be activated with keyboard using spacebar or enter key.
    Tab order is logical.
    Keyboard focus does not get trapped.
  • Grouped items – surveys; yes & no
  • Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb

    1. 1. BEAT THE TSUNAMI WITH A WAVE @PatrickDunphy
    2. 2. Who am I?
    3. 3. I work here I co-lead here
    4. 4. I live here
    5. 5. The Real Beginning The Beginning My AccessibilityJourney The Present
    6. 6. Some Things You don’t expect to learn
    7. 7. Not Taught Education & Awareness Necessary
    8. 8. Change Necessary Everyone is Responsible
    9. 9. Accessibility It’s Good For You
    10. 10. Technology Constant Change
    11. 11. Accessibility...
    12. 12. Core Concept of Accessibility
    13. 13. It’s About People Always think about users needs
    14. 14. 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
    15. 15. Accessibility Standards
    16. 16. The Wrong Question Not about if, it’s about when
    17. 17. The Silver Tsunami • Fastest growing user group • 19% of USA by 2030 • 4x likely to have disability • Experience = Expectations
    18. 18. Today’s Goal Introduce free tools that are easy to use and can be leveraged today.
    19. 19. AGENDA 1. Identify Issues 2. Discover Test Tools 3. Sample Test Plan 4. Testing Techniques
    20. 20. 1. Accessibility Issues
    21. 21. General Issues • Keyboard support • Sensory cues • Consistent navigation • No Context • Dynamic content • Controlling the UX
    22. 22. Image Problems • Misuse of alt text • Missing alt attributes • Charts and graphs • CSS images • Title attributes • Pictures of text
    23. 23. Content Issues • Poor structure • Inappropriate markup • Source order • Absolute font sizes • Poor contrast • Inappropriate link text • Language undefined
    24. 24. 2. Testing Tools
    25. 25. • Tools *assist* with evaluation • Identify *Potential* issues • Will not verify 100% accessible
    26. 26. 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
    27. 27. My Personal Favourite - WAVE Wave Features: • Results Summary • CSS Toggle • Contrast Summary • Document Outline • Target / Documentation • Code Inspector
    28. 28. USA Today.com | 34 Errors
    29. 29. ESPN.com | 36 Errors
    30. 30. NY Times.com | 61 Errors
    31. 31. CNN.com | 69 Errors
    32. 32. WEB Version toolbarApi
    33. 33. • Tools catch < 30% errors • Keyboard Functionality • High Contrast Mode • Form Labels / Errors • Code Inspection Accessibility Requires Manual Testing
    34. 34. 3. Sample Test Plan
    35. 35. 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
    36. 36. Compile UI 1. Modules, containers, templates, pages 2. Prioritize frequency & prominence 3. Include typically challenging elements for PWD’s
    37. 37. Sanity Test No CSS & No Images Does it still make sense?
    38. 38. Validate Code Validate HTML & CSS Catches errors bad for Assistive Technology
    39. 39. Apply Tools At least 2 Compare results Eliminate false positives
    40. 40. Test Subjectivity Judgement calls Improve w/Experience
    41. 41. Use Keyboard Most Important Test! Gateway to Accessibility Hardware & Software
    42. 42. Keyboard test everything! Links & Buttons are only way to interact with a page* * by default
    43. 43. Use Screenreader ... R E A D E R
    44. 44. Use Screenreader • IE 8+ and latest JAWS • Firefox and NVDA • Chrome & ChromeVox • VoiceOver and iOS/OSX • Talkback on Android
    45. 45. Verify Target Measure against predefined standard i.e. WCAG 2.0 AA
    46. 46. User Testing Involve Real People with Real Disabilities PWD using AT will reveal undiscovered issues Include seniors
    47. 47. Rinse & Repeat All Additions & Updates Avoid Accessiblity Atrophy
    48. 48. 4. Testing Techniques
    49. 49. 1. Keyboard 2. Headings 3. Images 4. Links 5. Forms 6. Colour 7. CSS 8. JavaScript 9. Multimedia Testable Items
    50. 50. KEYBOARD
    51. 51. 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
    52. 52. HEADINGS
    53. 53. 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
    54. 54. IMAGES
    55. 55. 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
    56. 56. LINKS
    57. 57. 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
    58. 58. FORMS
    59. 59. 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
    60. 60. COLOUR
    61. 61. 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
    62. 62. CSS
    63. 63. 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
    64. 64. JavaScript
    65. 65. 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/
    66. 66. Multimedia
    67. 67. Tools to use: • Keyboard • Speakers • Visuals Multimedia Issues : • Autoplay • Captioning • Transcripts • Keyboard Access BBC Multimedia Standards http://weba.im/bbcmedia
    68. 68. Vast Majority of Issues Keyboard or Visual Focus
    69. 69. Final Words • YOU are the best test tool • Offer PRAGMATIC solutions • ASK Questions • Avoid FUD (fear, uncertainty, doubt) • Be a SPONGE • SHARE your knowledge
    70. 70. Final Words • YOU are the best test tool • Offer PRAGMATIC solutions • ASK Questions • Avoid FUD (fear, uncertainty, doubt) • Be a SPONGE • SHARE your knowledge
    71. 71. 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
    72. 72. Final Words • YOU are the best test tool • Offer PRAGMATIC solutions • ASK Questions • Avoid FUD (fear, uncertainty, doubt) • Be a SPONGE • SHARE your knowledge
    73. 73. Final Words • YOU are the best test tool • Offer PRAGMATIC solutions • ASK Questions • Avoid FUD (fear, uncertainty, doubt) • Be a SPONGE • SHARE your knowledge
    74. 74. Final Words • YOU are the best test tool • Offer PRAGMATIC solutions • ASK Questions • Avoid FUD (fear, uncertainty, doubt) • Be a SPONGE • SHARE your knowledge
    75. 75. THANK YOU! @PatrickDunphy http://weba.im/psuweb14a11ytest
    76. 76. 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

    ×