Getting Started with Accessibility Testing

@PatrickDunphy#CSUN14 Friday, March 21,

2014

Who am I?

I Work Here I Co-Lead Here

I Live Here

You may have heard of it...

Getting Started with Accessibility

Testing

MAYORAL CAGE MATCH

Forget Politics. Accessibility FTW!!!

HOW?1. Identify Issues2. Discover Test Tools 3. Manual Testing4. Perform Tests5. Determine Winner

WHY?• It’s about people• Information Source• Gain Supporters• Direct Communication• AODA Legislation

• Limited Mobility• Cognitive Challenges• Colour Blind• Seizure Disorders• Deaf / Hearing Impaired• Visually Impaired • Total Blindness

DIFFERENT

USERSDIFFERENT

NEEDS• Voice Interaction• Clear Defined Goals• Colour Contrast• Clean Animation• Closed Captions • Screen Magnification • Screen Readers

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• Jim Thatcher Favlets

• Tools catch < 30% errors

• Keyboard Functionality• High Contrast Mode• Form Labels / Errors• Code Inspection

Accessibility Requires

Manual Testing

1. Keyboard2. Headings 3. Images4. Links5. Forms6. Colour7. CSS8. JavaScript9. Multimedia

9 Rounds

Round 1

KEYBOARD

Possible Tools:1. Keyboard2. Keyboard3. Keyboard

Keyboard Issues:• Logical Order• Focus Indicators• Consistent Behaviour• Bypass BlocksThe Pointerless Web

http://weba.im/pointerlessweb

KEYBOARDTesting Demo

Round 1 JudgesKeyboard

Round 2

HEADINGS

Possible Tools:• FAE (functional accessibility evaluator)

• Juicy Studio• WAVE• FANGS

Heading Issues:• Site Structure• Visual Indication• Follow Hierarchy• Used by AT

The HTML5 Document Outlinehttp://weba.im/headerfiction

HeadingsTesting Demo

Round 2 JudgesHeadings

Round 3

IMAGES

Possible Tools:• WAVE• High Contrast Mode• Web Dev Toolbar• Favlets

Image Issues:• Alt Attributes• Context + Function• Make sense w/o• Baked Text

Text Alternative Decision Tree http://weba.im/alternativetree

ImagesTesting Demo

Round 3 JudgesImages

Round 4

LINKS

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

LinksTesting Demo

Round 4 JudgesLinks

Round 5

FORMS

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

FormTesting Demo

Round 5 JudgesForms

Round 6

COLOUR

Possible Tools :1. Colour Contrast

Analyser2. Juicy Studio 3. WAVE

Colour Issues :• Insufficient Contrast• Sole means of info• Gradients• Images / background

Colour Accessibilityhttp://weba.im/24color

ColourTesting Demo

Round 6 JudgesColour

Round 7

CSS

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

CSSTesting Demo

Round 7 JudgesCSS

Round 8

JavaScript

Possible Tools :• WAVE Toolbar• FireEyes

JavaScript Issues :• Dynamic Content • Inappropriate Use• Modals / Menus• Controlling the user Accessible JavaScript

http://webaim.org/techniques/javascript/

JavaScriptTesting Demo

Round 8 JudgesJavaScript

Round 9

Multimedia

Tools to use:• Keyboard• Speakers• Visual

Multimedia Issues :• Autoplay• Captioning• Transcripts• Keyboard Access

BBC Multimedia Standardshttp://weba.im/bbcmedia

MultimediaTesting Demo

Round 9 JudgesMultimedia

My Personal Favourite - WAVE

Wave Features:• Results Summary• CSS Toggle• Contrast Summary• Document Outline• Target / Documentation• Code Inspector

And the Winner is...

10 Step Test Plan1. Compile UI2. Sanity Test3. Validate Code4. Apply Tools5. Test

Subjectivity6. Use Keyboard7. Use

Screenreader8. Verify Target9. User Testing10.Rinse &

Repeat

Links & Resources• accessiq.org• blog.paciellogroup.com• html5accessibility.com• dboudreau.tumblr.com• deque.com/blog/top-web-accessibility-resources• simplyaccessible.com/archives• w3.org/WAI• webaccessibility.com• webaim.org

Final Words• YOU are the best test tool

• Offer PRAGMATIC solutions

• ENGAGE the community

• Avoid FUD (fear, uncertainty, doubt)

• Be a SPONGE

• SHARE your knowledge

Happy Testing!

@PatrickDunphy