Upload
margie
View
44
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Practical Accessibility Testing. The High Tech + High Touch Recipe for Success. Photo by StarsApart. Glenda the Goodwitch. webstandards.org knowbility.org deque.com. Web Accessibility Testing Recipe. Web development process. Accessible web development. Equip - PowerPoint PPT Presentation
Citation preview
Practical Accessibility Testing
The High Tech + High TouchRecipe for Success
Photo by StarsApart
Glenda the Goodwitch
webstandards.orgknowbility.orgdeque.com
2
3
WEB ACCESSIBILITY TESTING RECIPE
4
Web development process
5
Accessible web development
6
1. Plan Assess site,
people, process Benchmark
industry Review design and
coding standards Develop roadmap
2. Equip Adopt development and
test tools Integrate with IDE, WCM
and Testing tools
6. Sustain Continuous monitoring Vendor verification New employee training
3. Empower Role-specific training
4. Test Distributed unit tests Centralized, automated
tests Expert usability evaluation
with assistive technology5. Remediate Prioritize Fix Retest
Accessibility Testing
is NOT Icing
Cost to Fix Accessibility Defects
Design Code Test Maintain0
2
4
6
8
10
12
Web Development Process Phase
Cost
Fac
tor
8
Practical Accessibility TestingThe Right Mix of
High Tech High Touch
High Touch Accessibility Testing Tools
• Heuristic – Perceivable, Operable, Understandable Robust
• Expert Manual Accessibility Testing– Screenreaders, Keyboard Only,
No Speakers• Usability Testing w People
with Disabilities
10
Jennison Lauren Gene
Screenreader Needs Captions Keyboard Only
11
High Tech + High Touch Accessibility Testing Tools
Page by Page Testing Tools
12
Page by Page Testing Tools– The Wave– Web Developer for Firefox– Functional Accessibility
Evaluator– Juicy Studios Accessibility
Toolbar– Jim Thatcher’s Favelets– FireEyes
Auto Test
25-30% of issues
14
High Tech Accessibility Testing Tools
Enterprise Accessibility Testing Tools
The Right Mix
Accessibility Testing Methods
High Tech
High Touch
16
17
High TechTouch Testing
www.verybestbaking.com
Wave – wave.webaim.org
Jim Thatcher’s Favelet’s• jimthatcher.com/favelets
Web Developer (Firefox Extension)• addons.mozilla.org/en-US/firefox/addon/60
Accessibility Evaluator• addons.mozilla.org/en-US/firefox/addon/accessibility-
evaluation-toolb/Juicy Studio Accessibility Toolbar
• addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too
Headings Map• http://addons.mozilla.org/en-us/firefox/addon/
headingsmap/
18
Very Best Baking Home Page
Smoke Test
Does this page have OBVIOUS
Accessibility Issues?
WAVE• Go to http://wave.webaim.org/• Type in URL to test• Press “WAVE this page” button
WAVE - 7 Accessibility Errors!
21
Meaningful Alt
23
Images & Jim Thatcher’s Favelets• Install Jim Thatcher’s Favelet’s in Firefox
– jimthatcher.com/favelets/• Find “Images” menu on JT Favelets and select “Active Images”
24
25
Web Developer Toolbar• Install Web Developer Toolbar in Firefox• Open Firefox and Select “Replace Images with ALT Attributes”
26
Check Home Page with Images Replaced by ALT
Color Contrast
28
FAE & Color ContrastInstall Functional Accessibility Evaluator (FAE) in FireFox addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/
• Select “Color Contrast ” from Style (on FAE toolbar)
FAE Color Contrast Issues
29
Meaningful Link Text
31
FAE & Link TextAccessibility Evaluator in FireFox Select “Links ” from Navigation (on FAE toolbar)
FAE & Link Text
32
Heading Structure
Headings Map• Install Heading Map plugin in Firefox
– addons.mozilla.org/en-us/firefox/addon/headingsmap• Select “Headings Map” from the Tools menu
Headings Map
ARIA Landmarks
37
Juicy Studios Accessibility Toolbar• Install Juicy Studios Accessibility Toolbar plugin in Firefox
– addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too
• Select “Document Landmarks” from the ARIA menu
38
Juicy Studios Accessibility Toolbar
39
High TechTouch Testing
www.verybestbaking.com
Wave – wave.webaim.org
Jim Thatcher’s Favelet’s• jimthatcher.com/favelets
Web Developer (Firefox Extension)• addons.mozilla.org/en-US/firefox/addon/60
Accessibility Evaluator• addons.mozilla.org/en-US/firefox/addon/accessibility-
evaluation-toolb/Juicy Studio Accessibility Toolbar
• addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too
Headings Map• http://addons.mozilla.org/en-us/firefox/addon/
headingsmap/
Page 40
41
Demo of FireEyes Accessibility Testing Tool
42
Using FireEyes to Test for Color Contrast
43
FireEyes Color Contrast Results
44
Your FireEyes Toolset
The Right Mix
Accessibility Testing Methods
High Tech
High Touch
45
46
Shoestring Testing Plan1. Home Page
– Smoke Test
2. Representative Pages– Page by Page Testing Tool(s)– Expert Functionality Testing
• No Eyes – Screenreader • No Ears – No Sound• No Hands – Keyboard Only
Practical Testing Plan1. Comprehensive Testing
– High Tech• Enterprise Accessibility Scans
2. Representative Pages– High TouchTech
• Page by Page Testing Tools– High Touch
• Expert Functionality Testing– Screenreader – No Sound– Keyboard Only
3. Key User Paths– High Touch
• Hands-on Accessibility Testing
47
No SightNo SoundNo Mouse
No Problem
Equal Access for All