Automating

Accessibility

Getting & Staying Accessible

Twitter: @joedolson

Hashtag: #wcmpls

Find these slides

These slides are posted at Slideshare:

http://www.slideshare.net/joedolson/automating

-accessibility-wordcamp-minneapolis-2015

Twitter: @joedolson

Hashtag: #wcmpls

3 Rules of Automated Testing:

- Some issues can’t be tested automatically.

- Testing tools must test the DOM

- Test early, test often.

Twitter: @joedolson

Hashtag: #wcmpls

Automatically test all the things.

...But you won’t find everything.

Easily Testable:

1) <form>

Your Name:

<input type=’text’ name=’name’

id=’name’ value=’’ />

</form>

2) <img src=’src.jpg’ />

Not so testable:

1) Click on the red button:

<button>One</button> <button>Two</button>

2) <img src=’giraffe.jpg’ alt=’Lion’ />

And guesswork isn’t gonna cut it.

Automated Tests

need to be right

Twitter: @joedolson

Hashtag: #wcmpls

Ya gotta test the DOM

- JavaScript changes the DOM

- These changes can fix or break accessibility

http://mothereffingtoolconfuser.com/

Twitter: @joedolson

Hashtag: #wcmpls

Accessibility is about content

If your theme is accessible, but your

content isn’t, then what’s the point?

Twitter: @joedolson

Hashtag: #wcmpls

Why do automatic testing, then?

- Automation eliminates obvious mistakes.

- Automation makes hands-on testing faster.

Three Step

Process for

AccessibilityLet’s just get this done, right?

Twitter: @joedolson

Hashtag: #wcmpls

1)Fully Automated Testing

- Needs to only return definite errors.

- Needs to test multiple pages at a time.

- Needs to tell you where you have issues,

and how to fix them.

Recommendation: Tenon.io

Twitter: @joedolson

Hashtag: #wcmpls

Tenon.io

- API driven Accessibility testing service

- Operates a headless browser to generate

the DOM before testing

- Integrates with WordPress using Access

Monitor http://wordpress.org/plugins/access-

monitor

Twitter: @joedolson

Hashtag: #wcmpls

What does Tenon.io tell you?

Example:

http://tenon.io/testNow.php?url=http%3A%2F%

2Fwww.google.com

Twitter: @joedolson

Hashtag: #wcmpls

2) Manual + Automation

- Returns both definite and possible issues*

- Tells you where the issue is and how to

verify whether it’s an error.

* By now, definite issues should be fixed.

Recommendation: WAVE Toolbar

Twitter: @joedolson

Hashtag: #wcmpls

What does WAVE give you?

- A whole lot more detail…

- But no automation.

- Every page tested independently.

Twitter: @joedolson

Hashtag: #wcmpls

3) Individual inspections

Tools:

- NVDA (open source screen reader)

- Chrome Accessibility Inspector (add-on)

- aViewer (open source API inspector)

Twitter: @joedolson

Hashtag: #wcmpls

Using Tenon with WordPress

Access Monitor

- Set up a schedule to monitor pages

- Run tests on single or batches of pages

- Test admin & front-end

- Filter out redundant results in batches.

Twitter: @joedolson

Hashtag: #wcmpls

Other Tenon integrations?

- Node https://www.npmjs.com/package/tenon-node

- Grunt https://www.npmjs.com/package/grunt-tenon

- Gulp https://www.npmjs.com/package/gulp-tenon-client

- Drupal https://www.drupal.org/project/tenon_io

- Visual Studio http://bit.ly/tenon-vsg

- Chrome http://bit.ly/chrome-tenon

- Firefox http://bit.ly/tenon-firefox

Twitter: @joedolson

Hashtag: #wcmpls

Limitations when testing software

- What do you need to test? The DOM

- What do you produce with themes and plug-

ins? CODE

- Need to run before you can test.

Twitter: @joedolson

Hashtag: #wcmpls

Demos

If I have time & internet access, I’ll demo

Access Monitor.

Twitter: @joedolson

Hashtag: #wcmpls

Thank you!

Joseph Dolsonhttp://www.joedolson.com/

joe@joedolson.com

http://twitter.com/@joedolson