O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Axe-matchers gem for automated accessibility testing

157 visualizações

Publicada em

slides for a lightning talk at virtual blacklight summit 2020

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Axe-matchers gem for automated accessibility testing

  1. 1. Axe-matchers gem for automated accessibility testing Presented by Charlie Morris Penn State University Libraries Blacklight Virtual Summit hosted by Triangle Research Libraries Network October 8, 2020
  2. 2. Worries list • Performance • User experience • Test coverage • Keeping hosting costs low • Observability • DevOps • “Good data” • Project management strategies • You could probably add 10 or 20 more
  3. 3. (Surprisingly) Easy to lose in this shuffle • Accessibility (you know, the federal law and overall right-thing-to-do for your users)
  4. 4. Existing options for accessibility (a11y) testing • Site auditing tools for after-the-act scanning of your site (e.g., SiteImprove) • Browser plugins for auditing pages on-the-fly one-by-one (e.g., WAVE) • Expert evaluation (e.g., having a designated “accessibility expert” on staff) • Automated testing per build of your application: axe-matchers
  5. 5. Introducing the axe-matchers gem • Maintained by Deque Labs • Gem at https://github.com/dequelabs/axe-matchers • Basically an a11y lint tool • Tests for the following: • WCAG 2.0 Level A & AA Rules • WCAG 2.1 Level A & AA Rules • “Best Practices Rules” • ”Experimental Rules” • See https://github.com/dequelabs/axe-core/blob/master/doc/rule- descriptions.md
  6. 6. How it works (assuming Rails) • Assuming: • Ruby on Rails with rspec for testing • Add and install the gem • Require the gem in your spec_helper or rails_helper ruby files • Add a be_accessible matcher to your test
  7. 7. See example of integrating to codebase • Commit to myaccount repo • Feature spec: RSpec.describe 'Fines', type: :feature do it 'is accessible', js: true do visit fines_path expect(page).to be_accessible end end
  8. 8. Failure reports • Clear • Short • Link to more details
  9. 9. Violation report example Found 4 accessibility violations: 1) color-contrast: Elements must have sufficient color contrast (serious) https://dequeuniversity.com/rules/axe/3.5/color-contrast?application=axeAPI The following 4 nodes violate this rule: Selector: #bookmarks_nav HTML: <a id="bookmarks_nav" class="nav-link" href="/bookmarks">Bookmarks<span class="badge badge-secondary" data-role="bookmark-counter">0</span></a> Fix any of the following: - Element has insufficient color contrast of 3.74 (foreground color: #8fa1be, background color: #1f427c, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
  10. 10. Thanks for listening