1. Automating
Accessibility
Getting & Staying Accessible

2. Twitter: @joedolson
Hashtag: #wcmpls
Find these slides
These slides are posted at Slideshare:
http://www.slideshare.net/joedolson/automating
-accessibility-wordcamp-minneapolis-2015

3. 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.

4. 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’ />

5. And guesswork isn’t gonna cut it.
Automated Tests
need to be right

6. Twitter: @joedolson
Hashtag: #wcmpls
Ya gotta test the DOM
- JavaScript changes the DOM
- These changes can fix or break accessibility
http://mothereffingtoolconfuser.com/

7. Twitter: @joedolson
Hashtag: #wcmpls
Accessibility is about content
If your theme is accessible, but your
content isn’t, then what’s the point?

8. Twitter: @joedolson
Hashtag: #wcmpls
Why do automatic testing, then?
- Automation eliminates obvious mistakes.
- Automation makes hands-on testing faster.

9. Three Step
Process for
Accessibility
Let’s just get this done, right?

10. 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

11. 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

12. Twitter: @joedolson
Hashtag: #wcmpls
What does Tenon.io tell you?
Example:
http://tenon.io/testNow.php?url=http%3A%2F%
2Fwww.google.com

13. 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

14. Twitter: @joedolson
Hashtag: #wcmpls
What does WAVE give you?
- A whole lot more detail…
- But no automation.
- Every page tested independently.

15. Twitter: @joedolson
Hashtag: #wcmpls
3) Individual inspections
Tools:
- NVDA (open source screen reader)
- Chrome Accessibility Inspector (add-on)
- aViewer (open source API inspector)

16. 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.

17. 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

18. 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.

19. Twitter: @joedolson
Hashtag: #wcmpls
Demos
If I have time & internet access, I’ll demo
Access Monitor.

20. Twitter: @joedolson
Hashtag: #wcmpls
Thank you!
Joseph Dolson
http://www.joedolson.com/
joe@joedolson.com
http://twitter.com/@joedolson