slides for a lightning talk at virtual blacklight summit 2020

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. 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. (Surprisingly) Easy to lose in this shuffle
• Accessibility
(you know, the federal law and overall right-thing-to-do for your
users)

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. 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. 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. 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. Failure reports
• Clear
• Short
• Link to more details

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. Thanks for listening