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