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.

Automated accessibility : What are current options?

1,852 views

Published on

Talk at the London Developer in Test Meetup.
http://www.meetup.com/London-Developers-in-Test/events/226314279/

Published in: Software
  • Be the first to comment

Automated accessibility : What are current options?

  1. 1. Automated Accessibility Shashikant Jagtap Twitter : Shashikant86 Blog: http://shashikantjagtap.net
  2. 2. Disclaimer The opinions expressed here are my own.
  3. 3. Topics  Accessibility Testing  Manual Accessibility Testing  Automated Accessibility Testing  Accessibility Toolkit
  4. 4. Accessibility Testing Standards  Web Content Accessibility Guidelines (WCAG)  Section 508  Web Content Accessibility Guidelines 2.0 (WCAG)
  5. 5. What To Check ?  ARIA Roles : role=main, states, properties  Audio/Video: Controls, track  HTML: JS/CSS, Tab-Index, Headings, Lang  Image: alt, aria role,  Focus : Tab-index  Color: Color Contrast
  6. 6. Manual  Screen Readers NVDA, Voiceover, TalkBack  Color Contrast Check  Using Online Tools W3C, Wave etc etc
  7. 7. Automation Options  Google Accessibility Developer Tool  A11y  Pa11y- Accessibility Testing pal  Axe – The Accessibility Engine  Tenon - Simplify Your Accessibility
  8. 8. Google Accessibility Developer Tool  GitHub: https://github.com/GoogleChrome/accessibility-developer-tools  Developed at Google  It can be used with NPM, Grunt and Ruby.  It may have other wrappers as well. NPM = accessibililty-developer-tool Grunt = A11y Ruby = Access Lint
  9. 9. GADT + A11Y
  10. 10. Pa11y  Automated testing pal  Developed at 'Nature'  Website : http://pa11y.org/  It can be used with NodeJS [npm]  $ npm install -g pa11y
  11. 11. Pa11y
  12. 12. Axe : The Accessibility Engine  Website : http://www.deque.com/products/axe/  Developed by 'Deque'  It can be used with many test frameworks  Cucumber, Rspec, Selenium, PhantomJS, Qunit, Jasmine, Mocha, karma  RubyGem : Axe-Matchers  https://rubygems.org/gems/axe-matchers
  13. 13. Tenon.io  Tenon : Needs API KEY https://tenon.io/ Grunt: $ npm install grunt-tenon- client RubyGem: Mortise $ gem install mortise
  14. 14. Demo
  15. 15. Links GitHub Repo: https://github.com/Shashikant86/modern-accessibility Video Demo Youtube https://www.youtube.com/watch?v=yv5ortZHVYc Pa11y https://www.youtube.com/watch?v=8zgPr9qWkuk Axe-tenon https://www.youtube.com/watch?v=KtusAZQfhaw

×