Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Automating
Accessibility
Getting & Staying Accessible
Twitter: @joedolson
Hashtag: #wcmpls
Find these slides
These slides are posted at Slideshare:
http://www.slideshare.net/jo...
Twitter: @joedolson
Hashtag: #wcmpls
3 Rules of Automated Testing:
- Some issues can’t be tested automatically.
- Testing ...
Twitter: @joedolson
Hashtag: #wcmpls
Automatically test all the things.
...But you won’t find everything.
Easily Testable:...
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 a...
Twitter: @joedolson
Hashtag: #wcmpls
Accessibility is about content
If your theme is accessible, but your
content isn’t, t...
Twitter: @joedolson
Hashtag: #wcmpls
Why do automatic testing, then?
- Automation eliminates obvious mistakes.
- Automatio...
Three Step
Process for
Accessibility
Let’s just get this done, right?
Twitter: @joedolson
Hashtag: #wcmpls
1)Fully Automated Testing
- Needs to only return definite errors.
- Needs to test mul...
Twitter: @joedolson
Hashtag: #wcmpls
Tenon.io
- API driven Accessibility testing service
- Operates a headless browser to ...
Twitter: @joedolson
Hashtag: #wcmpls
What does Tenon.io tell you?
Example:
http://tenon.io/testNow.php?url=http%3A%2F%
2Fw...
Twitter: @joedolson
Hashtag: #wcmpls
2) Manual + Automation
- Returns both definite and possible issues*
- Tells you where...
Twitter: @joedolson
Hashtag: #wcmpls
What does WAVE give you?
- A whole lot more detail…
- But no automation.
- Every page...
Twitter: @joedolson
Hashtag: #wcmpls
3) Individual inspections
Tools:
- NVDA (open source screen reader)
- Chrome Accessib...
Twitter: @joedolson
Hashtag: #wcmpls
Using Tenon with WordPress
Access Monitor
- Set up a schedule to monitor pages
- Run ...
Twitter: @joedolson
Hashtag: #wcmpls
Other Tenon integrations?
- Node https://www.npmjs.com/package/tenon-node
- Grunt htt...
Twitter: @joedolson
Hashtag: #wcmpls
Limitations when testing software
- What do you need to test? The DOM
- What do you p...
Twitter: @joedolson
Hashtag: #wcmpls
Demos
If I have time & internet access, I’ll demo
Access Monitor.
Twitter: @joedolson
Hashtag: #wcmpls
Thank you!
Joseph Dolson
http://www.joedolson.com/
joe@joedolson.com
http://twitter.c...
Upcoming SlideShare
Loading in …5
×

Automating Accessibility: WordCamp Minneapolis 2015

1,335 views

Published on

Learn how to use accessibility automation to find and fix problems on your website efficiently. You'll need to understand that automated accessibility won't give you an accessible web site; but it'll get you well on the way cheaply.

Published in: Internet
  • Be the first to comment

Automating Accessibility: WordCamp Minneapolis 2015

  1. 1. Automating Accessibility Getting & Staying Accessible
  2. 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. 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. 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. 5. And guesswork isn’t gonna cut it. Automated Tests need to be right
  6. 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. 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. 8. Twitter: @joedolson Hashtag: #wcmpls Why do automatic testing, then? - Automation eliminates obvious mistakes. - Automation makes hands-on testing faster.
  9. 9. Three Step Process for Accessibility Let’s just get this done, right?
  10. 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. 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. 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. 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. 14. Twitter: @joedolson Hashtag: #wcmpls What does WAVE give you? - A whole lot more detail… - But no automation. - Every page tested independently.
  15. 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. 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. 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. 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. 19. Twitter: @joedolson Hashtag: #wcmpls Demos If I have time & internet access, I’ll demo Access Monitor.
  20. 20. Twitter: @joedolson Hashtag: #wcmpls Thank you! Joseph Dolson http://www.joedolson.com/ joe@joedolson.com http://twitter.com/@joedolson

×