Automation Strategies for Baseline Accessibility - Merpay Tech Talk 2021

Merpay Frontend Team strategy to improve product accessibility using automation to establish a measurable and DX-friendly baseline.

Transcript

1. 1 Automation Strategies for Baseline Accessibility Marco Solazzi @dwj
2. 2 Frontend Engineer, Merpay
 
 - From Italy 
 - Passionate about UI development and accessibility
 Marco Solazzi

3. 3 A11y @ Merpay At Merpay Frontend Team, we aim to ensure that our services can be used any time, by anyone, anywhere. Our long-term goal is to achieve and keep WCAG AA Level for all of our services using automation to define a baseline.
4. 4 Accessibility and WCAG WCAG (Web Content Accessibility Guidelines) is a single shared standard for web content accessibility developed by W3C. It defines 3 Levels of Conformance: • A (lowest). Example: color is not used as the only visual means of conveying information • AA (mid range). Example: contents contrast ratio of at least 4.5:1 • AAA (highest). Example: contents contrast ratio of at least 7:1
5. 5 Accessibility and automation The goal is to check the accessibility of your rendered code using a tool. One of the most popular solution for automated accessibility audit is axe-core. Merits: • Highly configurable (ex: you can choose the WCAG level) • Great documentation on how to fix errors • Can be easily integrated with other tools
6. 6 “Automated accessibility checking is great, but it needs to be clearly understood that you can only auto-check about 30% of #a11y issues” https://twitter.com/stevefaulkner/status/863157742005047296 Warning!
7. 7 So… is it worth the effort? 1. Results can be measured and tracked over time 2. Can be used for basic quality validation on CI 3. Can prevent basic accessibility regressions Reasons to use automation accessibility tools:
8. 8 We already have a lot of processes, tools, bundlers… Should we really add a11y automation? ...yet more fatigue
9. 9 Reduce the developer’s stress 1. Familiar tools, less new concepts to learn 2. Reuse environments, fixtures, artifacts 3. Write less while creating more (accessibility) value Reuse existing tools and processes
10. 10 Authoring tools Use ESLint + eslint-plugin-vuejs-accessibility / eslint-plugin-jsx-a11y to receive warnings in the editor
11. 11 Documentation tools Get accessibility violations in Storybook with Storybook addon-a11y
12. 12 Component testing tools Storybook + Jest + jest-axe 1. Load existing stories 2. Mount 3. Check!
13. 13 Integration testing tools Cypress + cypress-axe • Per-audit configuration • Statistics for the most occurring violations • And re-use same test scenarios
14. 14 Why both Jest and Cypress? 見出し Cypress + Fast + Integrates nicely with Storybook + Fail-fast (if component fails Cypress will fail too) - Less complete + Audit component integration + Closer to the user experience + Reliable audit for visual issues (ie: contrast) - Slow Jest
15. 15 Results so far • We are already recording accessibility improvements ◦ Component audit success rate ~80% ◦ Some projects already achieved 0 accessibility violations • Because finding and understanding accessibility issues is more developer-friendly, awareness of accessibility topics has increased in the team We are still in a WIP status, but the future looks bright:
16. 16 Thanks!