ACCESSIBILITY TESTING 101@PatrickDunphy | World Usability Day

November 14, 2013

TransplantedNewfoundlander

About me...

Embarrasses wifeat hockey games

ProudDaddy

The REALBeginning

1999The

Beginning

My Accessibility Journey

ThePresent

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

Sir Tim Berners-Lee, Inventor of the WWW

Everyone = Accessible

• Closed Captions

• Meaningful Link Text

• Alternative Navigation

• Relative Sizing

• Logical Content Order

Different users. Different needs.

Today’s Goal

Introduce Free Testing Tools

That are available to Anyone

and are Easy To Use

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)

Where 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 reader6. Verify against target goal7. Conduct user testing8. Rinse & Repeat

Today’s Test Subject

http://www.instra.com

1. Disable CSS & Images

http://weba.im/webdevtoolbar

2. Validate Your Code

http://validator.w3.org/

3. Validate for Accessibility

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

14 errors 181 alerts to verify 83 contrast errors Style / No style Maps to target Show outline

Wave - Toolbar Demo

http://weba.im/toolbar

526(!) errors Evaluation includes

scripting Firefox Toolbar only Chrome release TBD

3. Validate for Accessibility

http://weba.im/fangs

FANGS Toolbar Useful quick test Not a substitute for

real screen readers Useful for headings &

link text

3. Validate for Accessibility

Accessibility Toolbar• Mulitple test types• Report generator• Navigation• Text Equivalents• Scripting• Uses other tools

http://weba.im/fae

4. Use Your Keyboard

5. Test with a Screen Reader

http://weba.im/jawsdemo http://nvaccess.org

JAWS VoiceOver NVDA

6. Verify against Target Goal

AODA – Accessibility for Ontarians with Disabilities Act

WCAG 2.0 – Web Content Accessibility Guideline

BS 8878 – British Standards

CVAA – 21st Century Communications Video Accessibility Act

Section 508 – US Federal Accessibility Law

ADA – American’s with Disabilities Act

7. Conduct User Testing

Involve Real People with Real Disabilities

PWD using AT will revealundiscovered issues

Include Seniors

8. Rinse & Repeat

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 (befriend #a11y)

• Don’t fear what you don’t know

• BE A SPONGE

• Share your knowledge

Thank you MRU!

@PatrickDunphy