Intro toAccessibility

TESTING

@patrickdunphy | #a11ycampdc | OCTOBER 12, 2013

TransplantedNewfoundlander

Another Canadian... eh?

Embarrasses wifeat hockey games

ProudDaddy

The REALBeginning

1999The

Beginning

How I got here

ThePresent

The Accessibility Cliche....

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.”

- Sir Tim Berners Lee(No offense TimBL!)

...Needs Perspective

“If anybody asks me what the Internet means to me, I will tell him without hesitation: To me (a quadriplegic) the Internet occupies the most important part in my life. It is my feet that can take me to any part of the world; it is my hands which help me to accomplish my work; it is my best friend - it gives my life meaning.”

Dr. Zhang Xu

• Orthopedic surgeon

• Life changing incident

• Chinese Disabled Activist

Umm.. Testing??

Today’s Goal

Introduce Free Testing Tools

That are available to Anyone

and are Easy To Use

Why Test for Accessibility?

Different user needs Larger audience reach Be social responsible Aids usability Better & more

maintainable code Search engines benefits Good publicity, avoid legal

fees & bad press

General Accessibility Issues• Keyboard support• Sensory cues• Consistent navigation• No Context• Dynamic content• Controlling user experience

Text & Content Issues

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

Common Image Problems• Misuse of alt text• Missing alt attributes• Charts and graphs• CSS images• Title attributes• Baked image text (brand/logo exception)

Responsive = Accessible ?

Responsive = Accessible ?• Responsive aids Accessibility• Different devices handle content differently• Needs to be planned accordingly

Why do I start?

1. Compile UI components – modules, containers, templates, pages

2. Prioritize frequency & prominence

3. Include elements typically challenging for persons with disabilities.

4. Determine your target goal.

Sample Test Plan1. Sanity Test w/o CSS & Images2. Validate your code3. Validate for Accessibility• apply testing tools (at least 2) & verify results• contrast/context/order/alternatives

4. Check keyboard Accessibility5. Test with a screen reader (JAWS, NDVA, VoiceOver)6. Check against WCAG 2.07. Conduct user testing8. Rinse & Repeat

Use Your Keyboard

WAVE - 1 Tool 3 Flavours

Web Version

Toolbar

API

Wave - Web Version

• Provides different views

• Determine target goal

• Summarizes results

• instant Documentation

• Code inspector

* Wave is a tool to assist with evaluation, it’s not used to verify content is 100% accessible.

Wave - Web Demo

http://wave.webaim.org

76 errors 191 alerts to verify 30 contrast errors Style / No style Maps to WCAG Show outline

WAVE - FireFox Toolbar

• Currently firefox only (ChromeTBD)

• Evaluation includes scripting

http://wave.webaim.org/toolbar

Toolbar Demo

http://wave.webaim.org/toolbar

45 errors

10 headers all h1

Wave API Overview

• V.1 released in March 2013

• Minimal cost ($0.04 - $0.025 / credit)

• XML / JSON

• Stand-alone Beta (Mac/Windows/Linux)

• Spider, URL Manager, Scheduler, etc.

http://wave.webaim.org/api

Disable CSS & Images

FANGS Firefox Plugin

https://addons.mozilla.org/en-us/firefox/addon/fangs-screen-reader-emulator/

Not a substitute for real screen readers

Useful for headings & link text

Testing Takeaways

• No silver bullet – only 25-30% of errors• Always requires manual testing• Subjective by nature• Won’t identify issues revealed by real users with disabilities• Not one size fits all – different types of sites

Useful Tools & Links

http://www.webaim.org

http://www.w3.org/WAI

https://atutor.ca

https://www.webaccessibility.com

http://www.webaxe.org

http://www.accessiq.org

Your keyboardWAVEScreen readersFANGS pluginWAT Toolbar (IE)Colour contrast analyzerFireEyesDiagnostic.cssNoCoffee PluginFirebug, Web Dev ToolbarHigh Contrast Mode

Final Words of Advice

• You are the most important testing tool• Don't just say no, offer solutions• Engage the community (#a11y is your friend)• Don’t fear what you don’t know• BE A SPONGE• Share your knowledge

Thank you #A11yDC!

@PatrickDunphy

COME TO TORONTO!

http://www.AccessibilityCampTo.orgRegister Online

November 16, 2013OCAD UNIVERSITY

Toronto, Ontario, Canada