practical accessibility testing the high tech + high touch recipe for success photo by starsapart

48
Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Upload: christian-york

Post on 01-Jan-2016

215 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Practical Accessibility Testing

The High Tech + High TouchRecipe for Success

Photo by StarsApart

Page 2: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Glenda the Goodwitch

webstandards.orgknowbility.orgdeque.com

2

Page 3: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

3

Page 4: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

WEB ACCESSIBILITY TESTING RECIPE

4

Page 5: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Web development process

5

Page 6: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

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 Testi ng tools

6. Sustain Conti nuous monitoring Vendor verifi cati on New employee training

3. Empower Role-specifi c training

4. Test Distributed unit tests Centralized, automated

tests Expert usability evaluati on

with assisti ve technology5. Remediate Prioriti ze Fix Retest

Page 7: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Accessibility Testing

is NOT Icing

Page 8: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Cost to Fix Accessibility Defects

Design Code Test Maintain0

2

4

6

8

10

12

Web Development Process Phase

Cost

Fac

tor

8

Page 9: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Practical Accessibility TestingThe Right Mix of

High Tech High Touch

Page 10: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

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

Page 11: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Jennison Lauren Gene

Screenreader Needs Captions Keyboard Only

11

Page 12: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

High Tech + High Touch Accessibility Testing Tools

Page by Page Testing Tools

12

Page 13: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

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

Page 14: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

14

High Tech Accessibility Testing Tools

Enterprise Accessibility Testing Tools

Page 15: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart
Page 16: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

The Right Mix

Accessibility Testing Methods

High Tech

High Touch

16

Page 17: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

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/

Page 18: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

18

Very Best Baking Home Page

Page 19: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Smoke Test

Does this page have OBVIOUS

Accessibility Issues?

Page 20: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

WAVE• Go to http://wave.webaim.org/• Type in URL to test• Press “WAVE this page” button

Page 21: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

WAVE - 7 Accessibility Errors!

21

Page 22: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Meaningful Alt

Page 23: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

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”

Page 24: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

24

Page 25: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

25

Web Developer Toolbar• Install Web Developer Toolbar in Firefox• Open Firefox and Select “Replace Images with ALT Attributes”

Page 26: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

26

Check Home Page with Images Replaced by ALT

Page 27: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Color Contrast

Page 28: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

28

FAE & Color Contrast

Install Functional Accessibility Evaluator (FAE) in FireFox addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/

• Select “Color Contrast ” from Style (on FAE toolbar)

Page 29: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

FAE Color Contrast Issues

29

Page 30: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Meaningful Link Text

Page 31: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

31

FAE & Link Text

Accessibility Evaluator in FireFox Select “Links ” from Navigation (on FAE toolbar)

Page 32: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

FAE & Link Text

32

Page 33: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Heading Structure

Page 34: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Headings Map• Install Heading Map plugin in Firefox

– addons.mozilla.org/en-us/firefox/addon/headingsmap

• Select “Headings Map” from the Tools menu

Page 35: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Headings Map

Page 36: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

ARIA Landmarks

Page 37: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

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

Page 38: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

38

Juicy Studios Accessibility Toolbar

Page 39: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

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: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Page 40

Page 41: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

41

Demo of FireEyes Accessibility Testing Tool

Page 42: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

42

Using FireEyes to Test for Color Contrast

Page 43: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

43

FireEyes Color Contrast Results

Page 44: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

44

Your FireEyes Toolset

Page 45: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

The Right Mix

Accessibility Testing Methods

High Tech

High Touch

45

Page 46: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

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

Page 47: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

Practical Testing Plan

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

Page 48: Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

No SightNo SoundNo Mouse

No Problem

Equal Access for All