quick ways to test for accessibility … without doing it all by yourself

Quick Ways to Test for Accessibility … Without Doing It All by Yourself

Angela M. Hooker#QuickA11yTesting @AccessForAll#AHG13 angelahooker.com

2

Hello!

Angela Hooker@AccessForAll#QuickA11yTesting | #AHG13

#QuickA11yTesting | #A11y | @AccessForAll | #AHG13

http://twitter.com/AccessForAll

3

So, what’s up? …


4#QuickA11yTesting | #A11y | @AccessForAll | #AHG13

Plan and prioritize


What are you testing?

• A video gallery?• A site? Is it responsive?• A page?• A mobile app?• Is it for an official review or just a quick check

for potential problems?


How much time do you have?


Prioritize again

• Do you only have to test or are you responsible for remediating the problems?

• Do you need to tell people how to fix the problems?


Use checklists and other resources

• Create or find a checklist for your specific needs:– 25 Ways to Make Your Website Accessible (check

for the items listed), by Dennis Lembree– Accessibility Quick Check, Tom Jewett– WCAG 2.0 Checklist, WebAIM– Video and Audio Accessibility Checklist– Course Accessibility Checklist– Mobile: In “Resources” section in this document

http://weba.im/25axs



http://www.tomjewett.com/accessibility/quickcheck.html

http://webaim.org/standards/wcag/checklist

http://www.accessiq.org/create/content/video-and-audio-accessibility-for-developers-checklist

http://www.csus.edu/accessibility/checklist.html


Get help … for now

• Colleagues (we’ll discuss them more later)• Students• Volunteers• Survey (depends on time)


After you test …

Think about what tools you like best—what appeals to me may not appeal to you.


How about a quick test now?

• Just for a few minutes, let’s see what we accessibility problems we can find on a popular site.

• I’m going to use a few tools that I like:– WAVE Toolbar– Web Developer Toolbar, by Chris Pederick– Juicy Studio Accessibility Toolbar– Paciello Group Web Accessibility Toolbar– No assistive technologies (?!)


Accessibility remix!


Consider another perspective and approach …


Consider another perspective and approach … create an accessibility team from people you already have on staff.

15

Share the work based on roles instead of correcting your colleagues’ work.


16

This makes your entire team responsible and accountable for their own work.


17

Talk with management.

(See Carol Smith’s Negotiate for the User.)


http://www.slideshare.net/carologic/empower-yourself-negotiate-for-the-user-14843321

18

Canadian Government’s resources

• Accessibility Responsibility Breakdown

• Canadian Government• Based on WCAG 2.0• Coopérative

AccessibilitéWeb


http://wet-boew.github.io/wet-boew/demos/arb-rra/arb-rra-eng.html


19

4 keys to building in accessibility


20

Understand disabilities


21

Train your colleagues according to each of their roles.


22

Teach them …

• … that we need to test and plan for accessibility throughout each project's lifecycle.

• ... how to choose technology that's accessible.• ... the importance of accessible platforms.• ... to not just do what the cool kids are doing for

the sake of doing it.• … development principles (good, clean,

accessible code).


23

Teach them …

• ... accessible design principles.• ... how people who have low-English proficiency,

dyslexia, cognitive impairments, etc. need plain language and other principles.

• … that we need to conduct usability testing with people with disabilities.

• … how people with disabilities use their assistive technologies—and that successfully using one assistive technology on a project doesn't mean blanket accessibility.


24

Divvy up the standards


25

Give them tools.


26

The roles overlap.



Create a policy

• Write an in-house policy (not an accessibility statement for the public).– Developing Organizational Policies on Web

Accessibility, W3C-WAI• Get management support to make it stick.

http://www.w3.org/WAI/impl/pol

http://www.w3.org/WAI/impl/pol

28

It won’t all happen overnight.


29

What doesn’t work

• Putting the work before relationships• Disinterest from upper management• Thinking our process won’t evolve• Allowing the accessibility program to be

personality driven—it must outlive you


30

What you’ll gain

• Save money by not making costly accessibility fixes later.• You’ll have a solid process that fights the

“accessibility is time consuming and expensive” issues.• You’ll have a fluid process—stands despite

staff changes, work demands, etc.


31

Now, back to you …



Keep calm and test quickly

33

Thank you!

Angela Hooker@[email protected]


http://twitter.com/AccessForAll

http://www.slideshare.net/AccessForAll

mailto:[email protected]

34

Resources


35

Sample process

Tailor this to your needs and to each project.1. Document this entire process and testing.2. Choose who should work on the project, and

assign tasks/roles to everyone according to their skills and strengths.

3. Plan/gather requirements with the decision makers, stakeholders, designers, developers, content providers, etc.


36

Sample process

4. Determine which standards and guidelines are appropriate for your project (WCAG 2.0, Mobile Best Practices, ATAG, CVAA, iOS Accessibility Standards, etc.).

5. Put accessibility requirements in any vendor requests for proposals and/or contracts.

6. Determine your users’ top tasks.


http://www.w3.org/TR/UNDERSTANDING-WCAG20/

http://www.w3.org/TR/mobile-bp/

http://www.w3.org/TR/ATAG20/

http://transition.fcc.gov/cgb/dro/cvaa.html

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/iPhoneAccessibility/Accessibility_on_iPhone/Accessibility_on_iPhone.html

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/iPhoneAccessibility/Accessibility_on_iPhone/Accessibility_on_iPhone.html

37

Sample process

7. Review the information architecture.8. Analyze the resulting wireframes.9. Conduct usability testing with paper

prototypes (wireframes).10.Choose and test the color scheme.11.Assess the design mockups.12.Review the final written content.


38

Sample process

13.Conduct more informal user testing (test the mockups, content, information architecture).

14.Review the templates (including ARIA); validate/remediate the (semantic) code.a. Just because your code validates doesn’t mean

your project is accessible—validate anyway!b. Just because your site doesn’t validate doesn’t

mean it’s inaccessible—validate anyway!


39

Sample process

15.Review the style sheets; validate/remediate the styles.

16.Test with automated accessibility tools.17.Review the scripting (JavaScript, AJAX,

jQuery, YUI, whatever); add more ARIA, if needed.

18.Test again with automated tools.


40

Sample process

19.Test with assistive technologies.20.Test on mobile devices and e-readers.21.Test with real people, including several

people with different disability types—don’t forget to test the written content, too.

22.Continue to improve and test after the launch (since browsers and software change).


41

WCAG 2.0 and general *a11y

• Government of Canada Web Experience Toolkit (WET)—above all else, see the Accessibility Responsibilities Breakdown; it will help you create your process and define roles.

• Constructing a POUR Website, WebAIM• BBC’s Future Media Standards and Guidelines• A11y Buzz

* accessibility


http://www.tbs-sct.gc.ca/ws-nw/wa-aw/wet-boew/index-eng.asp


http://webaim.org/articles/pour/

http://www.bbc.co.uk/guidelines/futuremedia/accessibility/

http://www.a11ybuzz.com/


Mobile

• Mobile Accessibility Guidelines, BBC• Mobile Accessibility Tests, Henny Swan• iOS Accessibility – A Useful Guide For Testing,

Rosie Sherry• Setting Up iOS

and Android for Accessibility Testing, Kathy Wahlbin

• Why Mobile Accessibility Matters: Best Practices to Make Your Mobile Site Accessible, mobiForge

http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile_access.shtml

http://www.iheni.com/mobile-accessibility-tests/

http://www.rosiesherry.com/2012/09/02/ios-accessibility-a-useful-guide-for-testing/



http://www.interactiveaccessibility.com/blog/ios-and-android-mobile-accessibility



http://mobiforge.com/developing/story/why-mobile-web-accessibility-matters-best-practices-make-your-mobile-site-accessibl

http://mobiforge.com/developing/story/why-mobile-web-accessibility-matters-best-practices-make-your-mobile-site-accessibl

43

Disabilities

• Disability types/issues– Visual, cognitive, motor, and hearing impairments;

neurological/seizure disorders; elderly and aging• What Is Assistive Technology? – ATIA• Videos of people using assistive technologies,

from AssistiveWare• How Assistive Technology Works

(demonstrations), University of Dundee


http://webaim.org/articles/cognitive/

http://webaim.org/articles/cognitive/

http://webaim.org/articles/motor/

http://webaim.org/articles/auditory/

http://webaim.org/articles/seizure/

http://www.w3.org/WAI/older-users/Overview.php

http://www.atia.org/i4a/pages/index.cfm?pageid=3859

http://www.assistiveware.com/user-videos

http://www.dundee.ac.uk/ics/services/web/accessibility/howassistivetechnologyworksvideodemonstratio/

44

Project management

• Integrating Accessibility in the Organization’s Web Development Life Cycle, Denis Boudreau

• Accessibility for Project Managers, Henny Swan

• Managing Accessibility Compliance in the Enterprise, Karl Groves

• Plan for Accessibility, Option Keys#QuickA11yTesting | #A11y | @AccessForAll | #AHG13

http://www.slideshare.net/AccessibiliteWeb/integrating-accessibility-in-the-organizations-web-development-lifecycle

http://www.slideshare.net/AccessibiliteWeb/integrating-accessibility-in-the-organizations-web-development-lifecycle

http://www.spotlessinteractive.com/articles/accessibility/accessibility-for-project-managers.php

http://www.slideshare.net/karlgroves/managing-accessibility-compliance

http://www.slideshare.net/karlgroves/managing-accessibility-compliance

http://www.cli.nsw.edu.au/optionkeys/guidelines/plan.htm

45

Project management

• Planning Accessibility, Government of Canada• Just Ask: Integrating Accessibility Throughout

Design, Shawn Lawton Henry


http://wet-boew.github.com/wet-boew/demos/arb-rra/arb-rra-planAccess-eng.html

http://www.uiaccess.com/JustAsk/index.html


46

Writing content

• Accessibility for Web Writers, by 4 Syllables• Content and Usability: Web Writing, Web

Credible• Make it Plain: Accessibility and Usability Throu

gh Plain Language, Angela Hooker (hey!)

• Plain Language: Accessibility for Information, Whitney Quesenbery

• Plain Language Checklist, PlainLanguage.gov#QuickA11yTesting | #A11y | @AccessForAll | #AHG13

http://www.4syllables.com.au/2010/09/accessibility-web-writers-part-1/

http://www.webcredible.co.uk/user-friendly-resources/web-usability/web-content.shtml

http://www.slideshare.net/AccessForAll/make-it-plain-accessbility-and-usability-through-plain-language

http://www.slideshare.net/AccessForAll/make-it-plain-accessbility-and-usability-through-plain-language

http://www.slideshare.net/whitneyq/plain-language-accessibility-for-conte

47

Design

• Web Accessibility for Designers, WebAIM• Just Ask: Integrating Accessibility Throughout

Design, Shawn Lawton Henry

• Design Considerations, WebAIM• Color Contrast Checker, WebAIM • Accessibility Color Wheel• Trace Photosensitive Epilepsy Analysis Tool

(PEAT) – tests flashing content#QuickA11yTesting | #A11y | @AccessForAll | #AHG13

http://webaim.org/resources/designers/



http://webaim.org/articles/design/

http://webaim.org/resources/contrastchecker

http://gmazzocato.altervista.org/colorwheel/wheel.php

http://trace.wisc.edu/peat/

48

Development

• Web Accessibility for Developers (videos), BBC• Build a code library!• Use code generators (see Accessify’s tools).• Web Developer Toolbar, Chris Pederick• Firebug, Mozilla• WCAG 2.0 Checklist, WebAIM• Web Accessibility Gone Wild, WebAIM


http://www.bbc.co.uk/programmes/p007trgm/clips

http://accessify.com/tools-and-wizards/

http://accessify.com/tools-and-wizards/

http://chrispederick.com/work/web-developer/

http://getfirebug.com/


http://webaim.org/articles/gonewild/

49

Development

• W3C Mobile Web Best Practices• Juicy Studio Accessibility Toolbar —for ARIA,

data tables, color contrast• aChecker, Inclusive Design Institute at OCAD

University• WAVE Toolbar, WebAIM• Favelets for Checking Web Accessibility, Jim

Thatcher


http://www.w3.org/TR/mobile-bp/

https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/

http://achecker.ca/

http://wave.webaim.org/toolbar/

http://jimthatcher.com/favelets/index.htm


50

Quality assurance

• Template for Accessibility Evaluation Reports, W3C-WAI

• Accessibility Evaluation Resources, W3C-Web Accessibility Initiative

• Evaluation, Testing, and Tools, WebAIM• WCAG 2.0 Checklist, WebAIM• Wickline Color Blind Web Page Filter• Web Developer Toolbar, Chris Pederick


http://www.w3.org/WAI/eval/template

http://www.w3.org/WAI/eval/Overview.html

http://webaim.org/articles/#evaluation


http://colorfilter.wickline.org/

http://colorfilter.wickline.org/

http://chrispederick.com/work/web-developer/

51

Quality assurance

• Firebug, Mozilla• Favelets for Checking Web Accessibility, Jim

Thatcher• Trace Photosensitive Epilepsy Analysis Tool

(PEAT) – tests flashing content• Web Accessibility Initiative (WAI),

Evaluating Websites for Accessibility


http://getfirebug.com/



http://trace.wisc.edu/peat/

http://www.w3.org/WAI/eval/Overview.html

52

Quality assurance

• Central Office of Information (COI), Delivering Inclusive Websites

• Establishing a Screen Reader Test Plan, Henny Swan

• How to Use NVDA and Firefox to Test for Accessibility, Marco Zehe

• Web Accessibility Gone Wild, WebAIM


http://coi.gov.uk/guidance.php?page=134

http://www.spotlessinteractive.com/articles/accessibility/screen-reader-test-plan.php

http://www.marcozehe.de/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/

http://www.marcozehe.de/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/

http://webaim.org/articles/gonewild/

53

Usability

• Usability Testing and Conducting Usability Testing, Just Ask: Integrating Accessibility Throughout Design, Shawn Lawton-Henry

• Usability Testing for People with Disabilities, Kathy Wahlbin and Mary Hunter Utt

• Steve Krug, Rocket Surgery Made Easy


http://www.uiaccess.com/accessucd/ut.html

http://www.uiaccess.com/accessucd/ut_conduct.html

http://www.slideshare.net/kwahlbin/usability-testing-for-people-wdisabilities


Photo credits

• Making a List and Checking It Twice, by Kylesteed

• Big Ben, by Simpologist• DJ Spinning, by Dan Tentler• Old Keys, by Jakeliefer

http://www.flickr.com/photos/kylesteeddesign/3724074594/

http://www.flickr.com/photos/simpologist/7409602/

http://www.flickr.com/photos/jakeliefer/240926153/

http://www.flickr.com/photos/jakeliefer/240926153/

quick ways to test for accessibility … without doing it all by yourself

Documents

accessibility problems

accessibility testing

accessibility program

quick test

ahg13 http

ahg13 hows

quick ways

potential problems