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

BEAT THE

TSUNAMIWITH A WAVE

@PatrickDunphy

Who am I?

I work here I co-lead here

I live here

The RealBeginning

1999The

Beginning

My Accessibility Journey

ThePresent

Some ThingsYou don’t expect to learn

Not TaughtEducation & Awareness Necessary

Change NecessaryEveryone is Responsible

AccessibilityIt’s Good For You

TechnologyConstant Change

Accessibility...

Core Concept of Accessibility

It’s About PeopleAlways think about users needs

DIFFERENT

USERSDIFFERENT

NEEDS• 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

Accessibility Standards

AODA

WCAG 2.0

CVAASect

508

BS

8878ADA

ISO /iEC 40500

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 = Expectations

Today’s GoalIntroduce free tools that are

easy to use and can be leveraged today.

AGENDA

1. Identify Issues2. Discover Test Tools 3. Sample Test Plan4. Testing Techniques

1. Accessibility Issues

General Issues

• Keyboard support• Sensory cues• Consistent navigation• No Context• Dynamic content• Controlling the UX

Image Problems

• Misuse of alt text• Missing alt attributes• Charts and graphs• CSS images• Title attributes• Pictures of text

Content Issues

• Poor structure• Inappropriate markup• Source order• Absolute font sizes• Poor contrast• Inappropriate link text• Language undefined

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

• Juicy Studio Plugin

• Firebug / Code Inspector

• Fangs• Web Accessibility

Toolbar (IE)• Colour Contrast

Analyzer• Aviewer

My Personal Favourite - WAVE

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

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

Accessibility Requires

Manual Testing

3. Sample Test Plan

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

Subjectivity6. Use Keyboard7. Use

Screenreader8. Verify Target9. User Testing10.Rinse &

Repeat

Compile UI1. Modules, containers,

templates, pages

2. Prioritize frequency & prominence

3. Include typically challenging elements for PWD’s

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 Android

Verify Target

Measure againstpredefined standard

i.e. WCAG 2.0 AA

User Testing

Involve Real People with Real Disabilities

PWD using AT will revealundiscovered issues

Include seniors

Rinse & Repeat

All Additions & Updates

Avoid Accessiblity Atrophy

4. Testing Techniques

1. Keyboard2. Headings 3. Images4. Links5. Forms

6. Colour7. CSS8. JavaScript9. Multimedia

Testable Items

KEYBOARD

Possible Tools:1. Keyboard2. Keyboard3. Keyboard

Keyboard Issues:• Logical Order• Focus Indicators• Consistent Behaviour• Bypass Blocks

The Pointerless Web http://weba.im/pointerlessweb

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

IMAGES

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

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

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

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

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

JavaScript

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/

Multimedia

Tools to use:• Keyboard• Speakers• Visuals

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

BBC Multimedia Standardshttp://weba.im/bbcmedia

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)

• Be a SPONGE

• SHARE your knowledge



• ASK Questions


• Be a SPONGE




• ASK Questions (#a11y is your friend)


• Be a SPONGE




• ASK Questions


• Be a SPONGE




• ASK Questions


• Be a SPONGE




• ASK Questions


• Be a SPONGE


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.edu/willamesbury/2013/09/13/beaver-stadium/http://www.yourleaf.org/blog/samantha-oneill/2013-04-22/dirty-hands-clean-planethttp://www.articlesweb.org/culture/neapolitan-ice-cream-origin-and-recipe-sourceshttp://agilemarketing.com.au/website-accessibility-and-usability-the-basics/http://www.lifeplus.com/us-en/product-category/vitamins-mineralshttp://chrisqueen.net/2011/04/19/from-newsreal-blog-bad-medicine/http://www.thatcutesite.com/kitten-doing-morning-exercises.htmlhttp://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/6788853248http://clickheretech.davegreenbaum.com/http://www.you-are-the-movement.com/?p=84http://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