Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automation Strategies for Baseline Accessibility - Merpay Tech Talk 2021

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.

Marco Solazzi

August 04, 2021

More Decks by Marco Solazzi

Other Decks in Programming


  1. 2 Frontend Engineer, Merpay
 - From Italy 

    Passionate about UI development and accessibility
 Marco Solazzi

  2. 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.
  3. 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
  4. 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
  5. 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!
  6. 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:
  7. 8 We already have a lot of processes, tools, bundlers…

    Should we really add a11y automation? ...yet more fatigue
  8. 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
  9. 12 Component testing tools Storybook + Jest + jest-axe 1.

    Load existing stories 2. Mount 3. Check!
  10. 13 Integration testing tools Cypress + cypress-axe • Per-audit configuration

    • Statistics for the most occurring violations • And re-use same test scenarios
  11. 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
  12. 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: